html - CSS - li 元素宽度错误

Question

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

问题是，我希望 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