ドロップダウンメニューで作業

Question

.dropdown-menu .sub-menu { 
 
    left: 100%; 
 
    position: absolute; 
 
}

<li style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" > 
 
      <a href="#" style="color:#fff"> 
 
      <span>TEST</span> 
 
      </a> 
 
      <ul class="dropdown-menu" id="menu1" style="background:#000;"> 
 
       <li style="width:50%"><a href="#" style="color:#fff">TEST</a></li> 
 
       <li style="width:50%"><a href="#" style="color:#fff">TEST</a></li> 
 
       <li><a href="#" style="color:#fff">TEST</a></li> 
 
       <li><a href="#" style="color:#fff">TEST</a></li> 
 
      </ul> 
 
</li>

私はそれが

が私を助けてください、これは、あなたに感謝のように水平に表示したいです！

Answer 1

私は、これはあなたが

.dropdown-menu .sub-menu { 
 
    left: 100%; 
 
    position: absolute; 
 
} 
 

 
.menu{ 
 
    max-width: 400px; 
 
} 
 

 
.menu>li{ 
 
    background-color: #111; 
 
} 
 

 
.dropdown-menu li { 
 
    width: 30%; 
 
    display: inline-block; 
 
    background-color: #111; 
 
}

<ul class="menu"> 
 

 
<li style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" > 
 
        <a href="#" style="color:#fff"> 
 
         <span>TEST</span> 
 
        </a> 
 
       <ul class="dropdown-menu" id="menu1" style="background:#111;"> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
       </ul> 
 
       </li> 
 
    
 
    </ul>

Answer 2

探しているものをあなたはそれを水平にするためにdisplay: inline-blockを持っているliアイテムを作ることができると思います。

各アイテムの幅を制御する場合は、liでwidthを使用してください。

行ごとに表示されるアイテムの数を制限する場合は、max-widthで制御して行の流れを次の行にすることができます。

liのmarginに項目間のスペースを少しずつ調整します。

<li style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" > 
 
        <a href="#" style="color:#fff"> 
 
         <span>TEST</span> 
 
        </a> 
 
       <ul class="dropdown-menu" id="menu1" style="background:#000;"> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
        <li><a href="#" style="color:#fff">TEST</a></li> 
 
       </ul> 
 
       </li> 
 

 
    <style> 
 
    .dropdown-menu { 
 
     max-width: 390px; 
 
    } 
 
    .dropdown-menu li { 
 
     display: inline-block; 
 
     margin: 0 20px 10px 0; 
 
     width: 100px; 
 
     min-height: 20px; 
 
    } 
 
    </style>

Answer 3

あなたは

.dropdown-menu{ 
 
    display: flex; 
 
    flex-direction: row; /*make a row*/ 
 
    align-items: center; /*vertical align centered*/ 
 
    justify-content: space-between; /*horizontal align*/ 
 
} 
 

 
.dropdown-menu li{ 
 
    flex-wrap: wrap; /*allow wrap line*/ 
 
    width: 33%; /*if u wnt 3 object per line*/ 
 
}

より精度のためにこのウェブサイトを見て、あなたが効率的に包まれた行と列を作るためにpermiteフレキシボックスを、試してみてください： flexbox guide