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自动拉伸，最大高度

回答

相关问题