html - 排序各种漂浮在右边的元素

Question

我有一个带有向右浮动的导航栏的标题，以及一个也必须向右浮动的注销图像，位于导航栏的右侧。

即使两者都向右浮动，bar 也总是排在最后，应该是注销图像。

这是一个工作示例(以“X”作为注销图像):http://jsfiddle.net/c2ccB/

HTML 的构建首先定位导航栏，然后是注销图像:

<nav class="nav">
    <ul>
        ...........

    </ul>
</nav>
<div class="logout"></div>

并且 Style 都具有 float 权限(请参阅 jsfiddle 以获取扩展样式版本):

nav{
    float: right;
    background: -webkit-linear-gradient(bottom, #DFDFDF , white 80%);
    border-radius: 5px;
    border:  1px solid #9F9D9D;
    margin: 42px 80px 0 0;
}

.logout{
    background-image: url(images/logout.png);
    height: 50px;
    width: 50px;
    float: right;
}

Answer 1

如果您不想更改 html 元素中的顺序，另一种选择是将它们包装在 <div> 中。与 float:right; ，然后将各个元素更改为 float:left;

这是一个 fiddle :fiddle