html - 如何防止两个 div 换行并且没有水平滚动条？

Question

我有一些div设置如下 http://jsfiddle.net/hwffdodx/10/

<div>
<div style="display:inline"> [Button A] </div>
<div style="display:inline">Some looooooooooooooooooooooooong text hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

基本上，我希望在同一行上有两个 div，第一个 div 我将用来显示一个图标，第二个 div 我希望它在调整窗口大小时包含在自身内。

我试过使用“white-space:nowrap”，但是当窗口调整大小时它会在底部显示一个滚动条，这不是我想要的。

我也尝试为第二个 div 设置一个“宽度”，但我希望我能找到一个更好的解决方案，因为在我的 html 中有大量这种样式的 block ，它们都有不同的父左填充，所以很难预设一个单一的宽度。

现在我使用“display:inline”让内容显示在同一行。但是现在缩进不再考虑包含按钮的第一个 div。

有解决这个问题的想法吗？

谢谢!

更新:

我找到了一个解决方案(“溢出:隐藏”就像变魔术一样...):

<div style="display:inline-block">
    <div style="float:left"> [Button A] </div>
    <div style="overflow:hidden">Some looooooooooooooooooooooooong text eeeeeeereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

现在，两个 div 始终在同一行，并且在调整大小时不会显示滚动条。而且，缩进效果完美(与仅使用“所有 div 内联”相比)

Answer 1

我不确定这是否是您想要实现的目标，但它可能会有所帮助:

.icon {
    display: inline;
    max-width: 20%;
}
.content {
    float: right;
    max-width: 80%;
}

<div>
    <div class="icon">[Button A]</div>
    <div class="content">Some looooooooooooooooooooooooong text hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

Ps : 在full page 模式下运行代码片段或查看updated Fiddle