Question

在同一行上，我希望在页面左侧放置一个内联块元素，在右侧放置其他内联块元素。

到目前为止，我有这个：

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

Answer 1

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

左侧的内联块位置和右侧的内联块位置 - 相同的线

1 个答案: