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

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

.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

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;
}

对齐<li>彼此相邻，无法正常工作</li>

4 个答案: