Question

我在网站上有一个侧边菜单。它位于名为#left_menu的浮动容器中，其中包含ul个li元素。

问题是，我希望li元素拥有自己生成的宽度，而不是从#left_menu继承它们，这似乎就是这样做的。

他们必须text-align在右边，并且只能在他们需要的范围内。

HTML

<div class="left_menu">
    <ul>
        <li>Derp</li>
        <li>Derp</li>
        <li>Derp</li>
        <li>Derp</li>                   
    </ul>
</div>

CSS

.left_menu{
    float: left;
    width: 300px;
    margin-left: 20px;
    line-height: 30px;
    padding-top: 3px;
}
.left_menu > ul li{
    color: #4c4c4c;
    text-align: right;
    font-size: 12px;
    display: block;
    padding: 5px;
}
.left_menu li:hover{
    color: white;
    background-color: #0072ff;
    border-radius: 5px;
}

JSFiddle here.

Answer 1

向左浮动然后向左清除，你应该得到你想要的东西：

.left_menu > ul li{
    color: #4c4c4c;
    text-align: right;
    font-size: 12px;
    display: block;
    padding: 5px;
    float:left;
    clear:left;
}

JSFiddle

或float:right和clear:right，具体取决于您要在哪一侧对齐按钮。

JSFiddle

Answer 2

只需漂浮你的ul左：

.left_menu > ul{
    float: left;
}

http://jsfiddle.net/mUP7n/4/

CSS - li元素的宽度错误

2 个答案: