html - 内联块位置在左侧，内联块位置在右侧-同一行

在同一行上，我想在页面左侧放置一个inline-block元素，在右侧放置另一个inline-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;  }

我应该使用浮子吗？
CodePen with Floats

最佳答案

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

看起来不错。之后，您可能需要清除浮子：

<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;" />

关于html - 内联块位置在左侧，内联块位置在右侧-同一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24164480/