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 {"

在“width: 50%”之后

float 属性指定框(元素)是否应该 float 。参见 http://www.w3schools.com/cssref/pr_class_float.asp