Question

为什么这段代码：

HTML

<ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a>

    </li>
    <li><a href="#">Another action</a>

    </li>
    <li><a href="#">Something else here</a>

    </li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a>

    </li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a>

    </li>
</ul>
</li>
</ul>

CSS

ul.dropdown-menu li {
    display: inline;
    float:left;
    width: 100%;
    height: 40px;
}

仍然没有使列表水平对齐？我无法弄清楚原因...... 这让我发疯了！

http://jsfiddle.net/Frondor/1440c8a6/

编辑：注意完整的HTML代码是在jsfiddle，我没有把它粘贴在这里，因为它太大了。

Answer 1

因此，如果您想要更大的菜单项，请从height中移除li并使用top上的填充和bottom a元素：

ul.dropdown-menu li {
    display: inline;
    float:left;
    width: 100%;
}

ul.dropdown-menu li a{
    padding-top: 10px;
    padding-bottom: 10px;
}

这是你改变的小提琴： http://jsfiddle.net/LL2nyuyL/

Answer 2

好吧，不是常见的行为，但要做到这一点，你必须给容器增加更多的宽度（ul.dropdown-menu），之后如果列表项是浮动的，你会看到菜单水平

ul.dropdown-menu li {
   float:left;
   padding: 0px;
}

ul.dropdown-menu {
   width: 600px;
}

http://jsfiddle.net/1440c8a6/3/

引导下拉列表中的项目不会水平对齐

2 个答案: