html - 左侧的行内 block 位置和右侧的行内 block 位置 - 同一行

Question

在同一行上，我希望将一个内联 block 元素定位在页面左侧，将其他内联 block 元素定位在右侧。

到目前为止，我有这个:

HTML

<div class="left-nav">
    <a href="">RcJane</a>
</div>

<div class="right-nav">
    <a href="">Home</a>
    <a href="">Available</a>
    <a href="">About</a>
    <a href="">Contact</a>
</div>

CSS

.right-nav{ background:#6699FF; }
.left-nav{  background:#0066CC; }
.right-nav,.left-nav{   display: inline-block;  }

我应该使用 float 吗？ CodePen with Floats

Answer 1

.right-nav { background:#6699FF; float: right; }
.left-nav { background:#0066CC; float: left; }

看起来不错。之后您可能需要清除 float :

<div class="left-nav">
    <a href="">RcJane</a>
</div>

<div class="right-nav">
    <a href="">Home</a>
    <a href="">Available</a>
    <a href="">About</a>
    <a href="">Contact</a>
</div>

<br style="clear: both;" />