左侧的内联块位置和右侧的内联块位置 - 同一行答案

【问题标题】：Inline-Block Position to the left and Inline-Block position to the right - Same Line左侧的内联块位置和右侧的内联块位置 - 同一行
【发布时间】：2014-06-11 21:43:24
【问题描述】：

在同一行，我想让一个 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

【问题讨论】：

@j08691 我最终使用了浮点数。如果我使用浮动，我需要显示内联块吗？好像我不再需要那个代码了
不，浮动不需要内联块元素。
@j08691 谢谢你的澄清

标签： html css

【解决方案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;" />

【讨论】：

感谢您的洞察力。我完全忘记了，我可以使用 clearfix hack。
很高兴它有帮助。如果您发现它有用，请考虑接受答案。 =)
其他清盘解决方案可quirksmode.org/css/clearing.html
overflow: auto 真的那么好吗？我的同事正在疯狂地使用它。
从未声称“最好”！简单地指出有几种给猫剥皮的方法，在我看来它们都有缺点。添加 div 会将布局放入标记中并溢出：auto 不是很直观