将<li>彼此对齐,不起作用

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%,但不起作用.

编辑

嗯..所有的回复都涉及浮动:左,但不想使用浮动:左,因为这会导致溢出到ul而且我必须使用溢出:隐藏..我认为还有另一个因素失败但他们都给了+1并接受首先回答的答案.

谢谢

Answer 1

这纯粹与你的宽度规范超过你允许的子元素相对于它的父元素这一事实有关:

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

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

Answer 2

加:

float: Left;

到菜单的li元素的css类(在此规则中):

".menu-left ul li {"

之后"宽度:50%"

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