如何防止内联 div 跳转到父级中的下一行？答案

【问题标题】：How to prevent inline divs from jumping to the next line within a parent?如何防止内联 div 跳转到父级中的下一行？
【发布时间】：2012-12-12 06:18:27
【问题描述】：

我有两个内联 div，它们的宽度超过了父级的宽度。因此第二个 div 跳到下一行： http://jsfiddle.net/uVqG6/2/

如何让两个 div 保持在同一行？

将overflow:hidden; 添加到 div.a 只会隐藏第二个 div。

【问题讨论】：

标签： css html

【解决方案1】：

有几种方法可以做到这一点。首先，您可以使用display: inline-block; 或float: left; 让div 并排放置。它们的工作方式不同，因此请务必根据您的情况使用正确的。

其次，除非包含的 div (a) 大到足以在同一行包含两个 div，否则这些都不起作用。或者，您可以在包含的 div (a) 上使用 overflow: hidden;。

编辑：

我已更新您的示例：http://jsfiddle.net/uVqG6/11/

我不得不使用white-space: nowrap;，因为里面的 div 被换行了。

这是另一个答案，它也回答了您的问题：CSS: how to stop text from taking up more than 1 line?

请记住，使用 display: inline-block 基本上将元素视为文本，因此大多数文本格式的 css 属性都将应用于它。

【讨论】：

【解决方案2】：

您可以为此使用position: absolute;，否则除了增加您的容器div宽度或使其成为nowrap之外别无他法

Demo

使用z-indexDemo

CSS

.a {
    width: 100px;
    height: 50px;
    border: solid 1px #345;
    position: relative;
}

.b {
    width: 60px;    
    height: 50px;
    background-color: red;
}
.c {
    width: 50px;    
    height: 50px;
    background-color: green;
    position: absolute;
    right: 0;
    top: 0;
}

【讨论】：

绝对位置解决方案是hack，你的具体实现是改变div的显示顺序。
使用white-space: no-wrap; 似乎对我没有帮助。然而，绝对定位成功了。
@Ramin，我专门更新了您的示例以使用无包装。 Alien 先生的解决方案仍然是一个 hack，它只适用于 2 个元素。如果这就是你所需要的，那很好，但如果你想添加一个额外的元素，你将来必须学习一个不同的解决方案。或者继续为每个新元素添加 css。

【解决方案3】：

内联元素的行为方式与文本大致相同。如果您想防止它们换行，请删除您用于格式化的空格，或将white-space:nowrap; 添加到.a 的规则中。

这是一个演示：http://jsfiddle.net/bfkgT/

【讨论】：

【解决方案4】：

.a {
width: 100px;
height: 50px;
border: solid 1px #345;
white-space: nowrap;
overflow:hidden; }

这是你想要的吗？

【讨论】：