3

我想水平对齐容器 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上面的方法试过了，但没有用。

4

3 回答 3

3

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

{ white-space:nowrap; }

在 JSFiddle 上查看

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

于 2013-01-04T16:36:29.743 回答
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>

结果： 在此处输入图像描述 完整显示属性列表

于 2013-01-04T16:42:07.353 回答
0

一种方法是使用另一个 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>
于 2013-01-04T16:38:26.540 回答