当其中一个孩子具有“宽度：100％”样式时如何避免换行答案

【问题标题】：How to avoid line break when one of the child has `width:100%` style当其中一个孩子具有“宽度：100％”样式时如何避免换行
【发布时间】：2013-01-05 00:56:30
【问题描述】：

我想水平对齐容器 div 元素中的 div 元素，避免子元素之间的换行。

但是，当子 div 元素之一具有 width:100% 样式时，如下所示：

<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
  <div style="display:inline-block;background-color:yellow;">1</div>
  <div style="display:inline-block;background-color:green;width:100%;">2</div>
  <div style="display:inline-block;background-color:yellow;">3</div>
</div>

该元素被单独放置在新的一行上，如下所示：

在任何情况下如何避免换行？当子元素的宽度之和大于父元素的宽度时，我希望元素的那部分被切断（隐藏）。我用上面的overflow-x:hidden试过了，但是没有用。

【问题讨论】：

喜欢这个jsfiddle.net/j08691/wGRnT/1?

标签： html css layout

【解决方案1】：

您的意思是当所有元素的总和大于父元素时，您希望所有元素都推到父元素之外？如果是这样，请尝试将其添加到父级：

{ white-space:nowrap; }

View on JSFiddle

之所以有效，是因为子元素被设置为内联块元素，因此它们被视为文本。 Chris Coyier 对空白here 的所有事物都有很好的解释（带有漂亮的图表），您可能会觉得这很有趣。

【讨论】：

它溢出容器的一侧并被隐藏。我将此解释为sawa想要的行为。
谢谢。这正是我想要的。

【解决方案2】：

你可以试试这个，而不是 inline-block 使用 table-cell：

<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
  <div style="display:table-cell;background-color:yellow;">1</div>
  <div style="display:table-cell;background-color:green;">2</div>
  <div style="display:table-cell;background-color:yellow;">3</div>
</div>

结果： full display property list

【讨论】：

我认为您建议display:table-cell 是对的，但我认为我需要添加width:100%。你的结果不是我想要的。

【解决方案3】：

一种方法是使用另一个 DIv，但使用 px 宽度而不是百分比，因为使用 100% 作为宽度永远不会起作用。

<div style="float:left;overflow:hidden;background-color:blue;width:300px;">
    <div style="width:3000px; overflow:auto;">

        <div style="display:inline-block;background-color:yellow;width:100px">1</div>
        <div style="display:inline-block;background-color:green;width:300px;">2</div>
        <div style="display:inline-block;background-color:yellow;width:100px;">3</div>

    </div>
</div>

【讨论】：