UL widht自動拉伸，最大高度

我有一個HTML的結構大致是這樣的：UL widht自動拉伸，最大高度

<ul class="groupmenu-drop"> 
    <li class="level1"> 
    <a href="#"> BMW </a> 
    <ul class="level1 groupmenu-drop"> 
     <li class="level2"> i3 </li> 
     <li class="level2"> i5 </li> 
     <li class="level2"> i7 </li> 
    </ul> 
    </li> 
    <li class="level1"> 
    <a href="#"> Mercedez Benz </a> 
    <ul class="level1 groupmenu-drop"> 
     <li class="level2"> a-class </li> 
     <li class="level2"> e-class </li> 
     <li class="level2"> c-class </li> 
     <li class="level2"> s-class </li>  
    </ul> 
    </li> 
</ul>

我目前的CSS：

ul.groupmenu-drop{ 
    display: block; 
    text-align: left; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    background: #fff; 
    top: 100%; 
    z-index: 99; 
    list-style: none none; 
    box-sizing: border-box; 
} 

li{ 
    list-style: none 
    padding: 8px 15px; 
    min-width: 230px; 
    position: relative; 
    margin: 0px auto; 
    box-sizing: border-box; 
} 

.groupmenu-drop > li { 
    width: 100%; 
}

我要讓第一UL擁有最大高度，所以當level1 li和它的孩子重疊了ul的高度，它會使ul伸展它的寬度，level1 li將填充它，這裏是我想要的樣子：

來源

2017-07-28 simple guy

可以與你分享的CSS整個代碼？ –

_「這就是我想要它看起來像」_什麼，你想使第二個「Mercedez奔馳」列表顯示_twice_，無論該元素只出現在DOM一次......？ – CBroe

@CBroe我不說我想呈現它兩次，它只是我想看起來像 –

試試這個，使用flex-flow: column wrap;將顯示li欄目，將和包裹，如果有必要或有可用空間垂直。

.groupmenu-drop:not(.level1) { 
 
    max-height: 200px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: column wrap; 
 
    flex-flow: column wrap; 
 
}

<ul class="groupmenu-drop"> 
 
    <li class="level1"> 
 
    <a href="#"> BMW </a> 
 
    <ul class="level1 groupmenu-drop"> 
 
     <li class="level2"> i3 </li> 
 
     <li class="level2"> i5 </li> 
 
     <li class="level2"> i7 </li> 
 
    </ul> 
 
    </li> 
 
    <li class="level1"> 
 
    <a href="#"> Mercedez Benz </a> 
 
    <ul class="level1 groupmenu-drop"> 
 
     <li class="level2"> a-class </li> 
 
     <li class="level2"> e-class </li> 
 
     <li class="level2"> c-class </li> 
 
     <li class="level2"> s-class </li> 
 
    </ul> 
 
    </li> 
 
    <li class="level1"> 
 
    <a href="#"> Audi </a> 
 
    <ul class="level1 groupmenu-drop"> 
 
     <li class="level2"> a-class </li> 
 
     <li class="level2"> e-class </li> 
 
     <li class="level2"> c-class </li> 
 
     <li class="level2"> s-class </li> 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2017-07-28 08:06:51

如果我使用flex-flow：column wrap ul width will not stretch但李的其餘部分將完美對齊垂直 –

事情是這樣的：

.groupmenu-drop { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: flex-end; 
 
} 
 

 
.level1 { 
 
    flex-basis: 50%; 
 
} 
 

 
.groupmenu-drop .groupmenu-drop { 
 
    display: block; 
 
}

<ul class="groupmenu-drop"> 
 
    <li class="level1"> 
 
    <a href="#"> BMW </a> 
 
    <ul class="level1 groupmenu-drop"> 
 
     <li class="level2"> i3 </li> 
 
     <li class="level2"> i5 </li> 
 
     <li class="level2"> i7 </li> 
 
    </ul> 
 
    </li> 
 
    <li class="level1"> 
 
    <a href="#"> Mercedez Benz </a> 
 
    <ul class="level1 groupmenu-drop"> 
 
     <li class="level2"> a-class </li> 
 
     <li class="level2"> e-class </li> 
 
     <li class="level2"> c-class </li> 
 
     <li class="level2"> s-class </li>  
 
    </ul> 
 
    </li> 
 
    <li class="level1"> 
 
    <a href="#"> Mercedez Benz </a> 
 
    <ul class="level1 groupmenu-drop"> 
 
     <li class="level2"> a-class </li> 
 
     <li class="level2"> e-class </li> 
 
     <li class="level2"> c-class </li> 
 
     <li class="level2"> s-class </li>  
 
    </ul> 
 
    </li> 
 
</ul>

來源

2017-07-28 07:55:07

UL widht自動拉伸，最大高度

回答

相關問題