我搜索过这个问题,但在这里找不到。
有9个菜单项的水平列表,容器宽度为1200px。
目前,每个菜单项(除了最后一个)都有一个右边距以将它们隔开,但无论屏幕/浏览器宽度如何,菜单项都需要从左边缘跨越到右边缘。即使在浏览器最小化时使用媒体查询来减少右边距,它仍然会执行以下操作:
- 在列表右侧留一个小空隙。
- 将最后一个菜单项推到下一行。
这是 JQuery 解决方案吗?
.menu {width: 1200px; margin: 0 auto;}
.menu li {display: inline-block; margin: 0 0 0 36.7px; position: relative;}
.menu li:nth-of-type(1) {margin: 0;}
最佳答案
试试 display:flex
。下面是一个例子
.menu {
width: 1200px;
margin: 0px;
padding: 0px;
background-color: palegreen;
display: flex;
flex-direction: row;
}
.menu li {
list-style: none;
flex: 1;
background-color: orange;
border: 1px solid green;
}
<div>
<ul class="menu">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div>
关于css - 水平菜单项跨越容器的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36447389/