CSS float：对; 不工作

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不是块级元素，因此它不会覆盖整个可用长度，而是根据其子级进行扩展，而且您还在的父级上使用了float UL，这会导致其向左浮动，无论元素级别还是块级不，不占用整个长度，而是按其子项相同地扩展inline-block elements！

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

如下：

的HTML

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

的CSS

#left-aligh{
    /* 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的宽度超出窗口范围，因此我将其删除。您可以稍后根据需要进行调整。

参见DEMO：jsFiddle链接