CSS浮动：对；不工作答案

【问题标题】：CSS float: right; not workingCSS浮动：对；不工作
【发布时间】：2017-01-18 21:59:58
【问题描述】：

<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> 内部声明，但它不起作用，请帮助。

【问题讨论】：

似乎根据您发布的内容浮动：jsfiddle.net/NotInUse/79hxaqb0
贴出你试过的代码还是不行！！！！！！！！！
@vals 请检查这个小提琴？ jsfiddle.net/Xbow23/uw91kdks
将 width:500px 添加到 ul
为什么#page-wrap-header 的宽度是2080px？是故意的吗？

标签： html css css-float

【解决方案1】：

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

请注意，默认情况下UL 不是块级元素，因此它不会跨越整个可用长度，而是根据它的子级扩展，您也使用了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 的宽度超出了窗口边界，因此我将其删除。您可以稍后根据需要对其进行调整。

查看演示：jsFiddle link

【讨论】：

感谢您的解释清楚。必须了解更多

【解决方案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;
}

我不确定它是否可以，但它对我有用。 :)

【讨论】：