CSS 将 <li> 彼此对齐，不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16285939/
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
Aligning <li> next to each other, not working
提问by SoldierCorp
I have a problem with aligment of two lielements inside a div because in the next example
我在 div 内对齐两个li元素时遇到问题，因为在下一个示例中
HTML
HTML
<div id="menu-container">
<div class="menu-left">
<ul id="menu-principal" class="menu">
<li><a href="">Hola</a></li>
<li><a href="">Hola2</a></li>
</ul>
</div>
<!-- More code -->
</div>
The CSS code is in the next link and I use that html structure because that is what is generated by placing a menu in wordpress.
CSS 代码在下一个链接中，我使用该 html 结构，因为这是通过在 wordpress 中放置菜单生成的。
http://jsfiddle.net/Soldier/KhLhR/1/
http://jsfiddle.net/Soldier/KhLhR/1/
I have a simple code with two lielements and I want to align horizontally with 50% of width for each but doesn't work.
我有一个包含两个li元素的简单代码，我想水平对齐每个元素的 50% 的宽度，但不起作用。
Edit
编辑
Well.. All responses involve float: left, but did not want to use float: left because this causes overflow to ul and I have to use overflow: hidden .. I thought there was another factor that was failing but they all give +1 and accept the answer that answered first.
嗯..所有响应都涉及 float: left，但不想使用 float: left 因为这会导致 ul 溢出，我必须使用 overflow: hidden .. 我以为还有另一个因素失败了，但他们都给了 +1并接受最先回答的答案。
Thanks
谢谢
回答by adaam
This is purely to do with the fact that your width specification is more than you've allowed for the child element in relation to it's parent elements:
这纯粹是因为您的宽度规范超过了您允许的子元素相对于其父元素的宽度：
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%; // should be less than 50%
}
Updated fiddle: http://jsfiddle.net/KhLhR/3/
更新小提琴：http: //jsfiddle.net/KhLhR/3/
回答by Simone Pessotto
Add:
添加：
float: Left;
to the css class of the li elements of the menu (in this rule):
到菜单的 li 元素的 css 类（在此规则中）：
".menu-left ul li {"
“.menu-left ul li {”
After the "width: 50%"
在“宽度：50%”之后
The float property specifies whether or not a box (an element) should float. See http://www.w3schools.com/cssref/pr_class_float.asp
float 属性指定框（元素）是否应该浮动。见http://www.w3schools.com/cssref/pr_class_float.asp
回答by Schaemelhout
http://jsfiddle.net/Soldier/KhLhR/1/
http://jsfiddle.net/Soldier/KhLhR/1/
.menu-left ul li {
display:inline-block;
float:left;
vertical-align: top;
width: 50%;
}
回答by Tombala
Add a left float to your li elements:
向 li 元素添加左浮动：
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%;
float: left;
}
