Question

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

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

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

Answer 1

有几种方法可以做到这一点。首先，您可以使用display: inline-block;或float: left;让divs并排坐下。它们的工作方式不同，所以请务必使用合适的工具。

其次，除非包含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属性都将适用于它。

Answer 2

您可以使用position: absolute;，除了增加容器div宽度或使其nowrap

之外别无其他办法

Demo

使用z-index Demo

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;
}

Answer 3

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

以下是演示：http://jsfiddle.net/bfkgT/

Answer 4

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

这样做你想要的吗？

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

4 个答案: