CSS浮动：对；不工作

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

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

Answer 1

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

我不确定它是否合适，但它对我有用。 :)

Answer 2

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

请注意，默认情况下 UL 不是 块级元素 ，因此它不会跨越整个可用长度，而是根据它的子项扩展，您也使用了 float留在 UL 的父级上，这导致它向左浮动，浮动元素，无论是否为块级，都不会占据整个长度，而是根据其子级扩展 inline-block elements!

从包装器中移除浮动 div 并制作 UL 块级别 ，然后你的 float:right 将按预期工作！

如下：

HTML

<div id="left-align">
  <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>

CSS

#left-align {
    /* Remove float */
    position: relative;
    bottom: 300px;
}

ul {
    display:block;
    padding:0;
}

#page-wrap-header {
     /* removed width */
     margin: 0 auto;
     text-align: left;
}

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

查看演示：jsFiddle link

CSS浮动：对；不工作

CSS float: right; not working

html

css

css-float