css - 对齐彼此相邻，不工作

Question

我在 div 中对齐两个li元素时遇到问题，因为在下一个示例中

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>

CSS 代码在下一个链接中，我使用该 html 结构，因为这是通过在 wordpress 中放置菜单生成的。

http://jsfiddle.net/Soldier/KhLhR/1/

我有一个包含两个li元素的简单代码，我想水平对齐每个 50% 的宽度，但不起作用。

编辑

好吧..所有响应都涉及float：left，但不想使用float：left，因为这会导致ul溢出，我必须使用overflow：hidden ..我认为还有另一个失败的因素，但他们都给+1并接受最先回答的答案。

谢谢

Answer 1

添加：

float: Left;

到菜单的 li 元素的 css 类（在此规则中）：

".menu-left ul li {"

在“宽度：50%”之后

float 属性指定一个盒子（一个元素）是否应该浮动。见http://www.w3schools.com/cssref/pr_class_float.asp

Answer 2

这纯粹是因为您的宽度规范超过了子元素相对于其父元素所允许的宽度：

.menu-left ul li {
    display:inline-block;
    vertical-align: top;
    width: 50%; // should be less than 50%
}

更新小提琴：http: //jsfiddle.net/KhLhR/3/

Answer 3

http://jsfiddle.net/Soldier/KhLhR/1/

.menu-left ul li {
    display:inline-block;
    float:left;
    vertical-align: top;
    width: 50%;
}

Answer 4

为您的 li 元素添加一个左浮点数：

.menu-left ul li {
    display:inline-block;
    vertical-align: top;
    width: 50%;
    float: left;
}