Question

我有一个标题，右侧有一个导航栏，还有一个登出图像，该图像也必须向右浮动，位于导航栏的右侧。

即使两者都向右浮动，bar也总是占据最后一个位置，这应该是注销图像。

这是一个工作示例（以“X”作为退出图像）：http://jsfiddle.net/c2ccB/

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

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

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

Style和右浮动（请参阅扩展样式版本的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

订购漂浮在右侧的各种元素

1 个答案: