Html 使所有 <li> 的宽度与最宽的相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8824232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make all <li> same width as the widest
提问by Christian Bekker
I've got this menu wich is setup inline and has dropdowns.
The inner ulhas a background.
Each dropdown lihas a :hoverthat changes the background of the li:
我有这个菜单，它是内联设置的，并且有下拉菜单。
内部ul有背景。
每个下拉菜单li都有一个:hover改变背景的li：
<div id="navMain">
<ul>
<li><a href="#nogo">Forside</a>
<ul>
<li><a href="#nogo">1111111111111</a></li>
<li><a href="#nogo">Link 1-2</a></li>
<!-- etc. -->
</ul>
</li>
<li><a href="#nogo">Om Os</a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<!-- etc. -->
</ul>
</li>
<li><a href="#nogo">Link 3</a>
<ul>
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
Problem is, that when one of the submenu liis longer than the others, it will only expand itself, and not the other liofcourse.
This results in the :hovereffect having different lengths.
问题是，当一个子菜单li比其他子菜单长时，它只会扩展自身，而不会扩展另一个li。
这导致:hover效果具有不同的长度。
So how would i make all liin each inner ulthe same size as the widest one?
那么我如何使li每个内部ul的所有尺寸都与最宽的尺寸相同？
Here you can find the CSSif needed.
如果需要，您可以在此处找到 CSS。
回答by Darkade
Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width
这里。请注意，我在您的菜单li 中添加了一个类，并且在您的 css 中添加了主体背景，因为我没有注意到您的菜单。最后，技巧是通过使 li 元素的宽度为 100%
body {
background-color: green;
}
.menu li {
width: 100%
}
#navMain {}
#navMain ul {
padding: 0;
margin: 0;
z-index: 2;
}
#navMain ul li {
margin-right: 5px;
text-align: center;
}
#navMain li a {
display: block;
text-decoration: none;
color: white;
padding-left: 10px;
padding-right: 10px;
}
#navMain li a:hover {
background-color: black;
}
#navMain ul li:last-child {
margin-right: 0px;
}
#navMain li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
}
#navMain ul ul {
position: absolute;
top: 20px;
visibility: hidden;
background-image: url(img/alphaBg.png);
}
#navMain ul li ul li {
font-size: 12px;
margin-right: 0px;
text-align: left;
}
#navMain ul li ul li:first-child {
padding-top: 5px;
}
#navMain ul li:hover ul {
visibility: visible;
}<html>
<head>
</head>
<body>
<div id="navMain">
<ul>
<li><a href="#nogo">Forside</a>
<ul class="menu">
<li><a href="#nogo">1111111111111</a></li>
<li><a href="#nogo">Link 1-2</a></li>
<li><a href="#nogo">Link 1-3</a></li>
<li><a href="#nogo">Link 1-3</a></li>
<li><a href="#nogo">Link 1-3</a></li>
<li><a href="#nogo">Link 1-3</a></li>
</ul>
</li>
<li><a href="#nogo">Om Os</a>
<ul class="menu">
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a>
<ul class="menu">
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>回答by David Nguyen
li {display:block}will make the list items as wide as the widest item in that parent container
li {display:block}将使列表项与该父容器中最宽的项一样宽
回答by Nikit Barochiya
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
background:#ededed;
margin:0 auto;
}
.wrapper{
width:720px;
border:1px solid red;
padding:5px;
}
.menu {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
.menu li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</div>
</body>
</html>
