工作與下拉菜單

.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>

我希望它顯示在水平這樣

請幫幫我，謝謝！

來源

2016-11-04 JesseMcCao

我認爲這是你在找什麼

.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>

來源

2016-11-04 09:00:31 Rahul

謝謝，它的工作 – JesseMcCao

可以使li項目有display: inline-block，使其水平。

如果要控制每個項目的寬度，請在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>

來源

2016-11-04 09:02:09 elfan

謝謝，但我可以投一個人:( – JesseMcCao

沒問題，很高興你找到解決方案:) – elfan

你應該嘗試flexbox，這是permite你做出行高效換行

.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*/ 
 
}

看這個網站，更精確： flexbox guide

來源

2016-11-04 09:08:09

工作與下拉菜單

回答

相關問題