Question

<div id="left-aligh">
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Registered With</a></li>
        <li><a href="#">Social</a></li>
        <li style="float: right;"><a class="active" href="#">Regsiter</a></li>
    </ul>
</div>

使用以下代码将所有菜单项推到左侧

#left-aligh {
    float: left;
    position: relative;
    bottom: 300px;
}

但是我想将寄存器单独推到右边，因为float选项不起作用。我试图在<li>内部声明，但它不起作用，请帮助。

Answer 1

当您在元素上使用float:right;时，它会移动到父级的右侧，而不是页面的右侧。在上面的情况下，它确实移动到了父级的右侧，看起来它没有像预期的那样起作用，因为父级，即UL元素只有那么大的宽度。

请注意，默认情况下UL不是块级元素，因此它不会跨越整个可用长度，而是根据它的子项进行exapand，你也使用了{ {1}}，导致它浮动到左边，浮动的元素，无论块级别与否，都不占用整个长度，而是exand，因为它的子级相同UL！

从包装inline-block elements＆amp;中删除浮动使div 阻止级别，然后您的UL将按预期工作！

如下：

HTML

float:right

CSS

<div id="left-aligh">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Registered With</a></li>
    <li><a href="#">Social</a></li>
    <li style="float: right;"><a class="active" href="#">Regsiter</a></li>
  </ul>
</div>

由于#page-wrap-header的宽度，它超出了窗口范围，因此我删除了它。您可以根据需要稍后调整它。

见DEMO：jsFiddle link

Answer 2

<div id="left-aligh">
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Registered With</a></li>
        <li><a href="#">Social</a></li>
        <li><a class="active" href="#">Regsiter</a></li>
    </ul>
</div>

#left-aligh {
    position: relative;
}

li:last-child {
    float: right;
}

我不确定它是否可以，但它对我有用。：）

CSS float：right;不工作

2 个答案: