如何解决<ul> 元素没有占据完整的内容宽度
我正在制作一个带有无序列表的导航栏。我正在使用 flexbox。
代码如下:
/* navbar */
.top-navbar {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 4%;
}
.top-nav-list {
flex: 0 1 auto;
/* I have to change the grow & basis to get my desired result */
}
.top-nav-list li {
display: inline-block;
padding: 0 2%;
/* This padding has no effect on the full width of ul element */
}
.watch-link {
margin-left: auto;
}
<header>
<nav class="top-navbar">
<div class="nav-logo">Title</div>
<ul class="top-nav-list">
<!-- This is the problem element -->
<li>Browse</li>
<li><a href="">Movies</a></li>
<li><a href="">TV</a></li>
<li>Search Bar</li>
<li>Expand</li>
</ul>
<a href="#" class="watch-link"><button class="watch-btn">Watchlist</button></a>
</nav>
</header>
容器中有 3 个弹性项目。其中之一是无序列表。即使 flex 容器中有可用空间,ul
也不会占用其全部内容宽度。它分成两行。我可以设置 flex-grow
和 flex-basis
以占用更多可用空间。
但默认情况下不应该采用完整的内容宽度吗?
所有列表项都是内联块,最后一项仍然进入下一行。 width:fit-content
也不起作用。并且 padding
对宽度没有影响。它只会让更多的项目进入第二行。
我也在使用 sanitize css 来规范化浏览器默认样式。
解决方法
我找到了断线的解释。这是这一行:
padding: 0 2%; /*This padding has no effect on the full width of ul element */
我让孩子的 (list-item
) 填充等于父母 (ul
) 宽度的百分比。但宽度尚未定义。父级的宽度由用户或其内容定义。所以,我使用了一个尚不存在的变量。 这也是填充对最终宽度没有影响的原因。
因此,由于浏览器无法在不知道父级宽度的情况下设置内边距,因此它首先根据所有子项的内容宽度计算 ul
的总宽度,没有内边距。然后,在没有填充的情况下设置 ul
的宽度后,它为每个孩子提供 2%
填充。但是,由于 ul
中没有可用的额外空间/宽度,如果我们使用 white-space: nowrap
如果我们使用任何其他填充单位,如 px
、em
或 vw
,它会起作用,因为 孩子的宽度不依赖于未定义的父宽度用户。
看起来 li
项在 ul
元素内中断。所以在你的 CSS 中使用 white-space:nowrap;
:
.top-nav-list {
flex: 0 1 auto;
white-space:nowrap;
}
示例:
/* navbar */
.top-navbar {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 4%;
}
.top-nav-list {
flex: 0 1 auto;
white-space:nowrap;
/* I have to change the grow & basis to get my desired result */
}
.top-nav-list li {
display: inline-block;
padding: 0 2%;
}
.watch-link {
margin-left: auto;
}
<header>
<nav class="top-navbar">
<div class="nav-logo">Title</div>
<ul class="top-nav-list">
<!-- This is the problem element -->
<li>Browse</li>
<li><a href="">Movies</a></li>
<li><a href="">TV</a></li>
<li>Search Bar</li>
<li>Expand</li>
</ul>
<a href="#" class="watch-link"><button class="watch-btn">Watchlist</button></a>
</nav>
</header>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。