gpt4 book ai didi

html - 为什么我的
    没有扩展宽度来覆盖所有

转载 作者:行者123 更新时间:2023-11-28 02:27:22 24 4
gpt4 key购买 nike

<分区>

我有一个试图用 flexbox 创建的导航。我希望有一个最大高度,并且有 <li>当没有足够的空间时推送到新列。

我已经显示了 <ul>内联柔性。 <li>正在跳到一个新专栏,但是 <ul>不随 <li> 展开- 造成溢出效应

https://codepen.io/Woodenchops/pen/KGOYRK

ul {
background: red;
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 350px;
padding: 1rem;
}

.sub-ul {
background: none;
}

li {
list-style: none;
font-size: 46px;
}

.sub-li {
font-size: 16px;
}


.oneColumn {
width: auto;
}

.twoColumn {
width: 490px;
}

.threeColumn {
width: 980px;
}
<ul class="sub-menu topul">
<li class="menu-item"><a href="">item1</a></li>
<li class="menu-item"><a href="">item2</a></li>
<li class="menu-item"><a href="">item3</a></li>
<li class="menu-item"><a href="">item4</a></li>
<li class="menu-item"><a href="">item5</a></li>
<li class="menu-item">

<ul class="sub-menu sub-ul">
<li class="menu-item sub-li">

<a href="">sub menu item</a>

</li>
<li class="menu-item sub-li">

<a href="">sub menu item</a>

</li>
<li class="menu-item sub-li">

<a href="">sub menu item</a>

</li>
</ul>

</li>

<li class="menu-item"><a href="">item4</a></li>
<li class="menu-item">

<ul class="sub-menu sub-ul">
<li class="menu-item sub-li">

<a href="">sub menu item</a>

</li>
<li class="menu-item sub-li">

<a href="">sub menu item</a>

</li>
<li class="menu-item sub-li">

<a href="">sub menu item</a>

</li>
</ul>

</li>


</ul>


24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com