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

I have two inline divs which exceed in width the parent's width. Therefore the second div jumps to the next line: http://jsfiddle.net/uVqG6/2/

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

How can I keep both divs on the same line?

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

Adding overflow:hidden; to div.a simply hides the second div.

添加溢出：隐藏; div.a只是隐藏第二个div。

4 个解决方案

#1

You can use position: absolute; for this, else no other way except increasing your container div width or making it nowrap

你可以使用position：absolute;为此，除了增加容器div宽度或使其成为现在之外别无他法

Demo

演示

Using z-index Demo

使用z-index演示

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

#2

Theres a couple of ways to do this. First of all, you can use display: inline-block; or float: left; to get the divs to sit side by side. They work different, so be sure to use the right one for your case.

有几种方法可以做到这一点。首先，你可以使用display：inline-block;或漂浮：左;让divs并排坐下。它们的工作方式不同，所以请务必使用正确的方法。

Second, neither of those will work unless the containing div (a) is large enough to contain both of the divs on the same line. Or, you can use overflow: hidden; on the containing div (a).

其次，除非包含div（a）足够大以包含同一行上的两个div，否则它们都不会起作用。或者，你可以使用overflow：hidden;在包含div（a）上。

Edit:

编辑：

I've updated your example: http://jsfiddle.net/uVqG6/11/

我已经更新了你的例子：http：//jsfiddle.net/uVqG6/11/

I had to use white-space: nowrap;, since the inside divs were wrapping.

我不得不使用white-space：nowrap;，因为内部div正在包装。

Here's another answer which also answers your question: CSS: how to stop text from taking up more than 1 line?

这是另一个答案，它也回答了你的问题：CSS：如何阻止文本占用超过1行？

Remeber that using display: inline-block basically treats the element as text, so most text-formatting css properties will apply to it.

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

#3

Inline elements behave in much the same way as text does. If you want to prevent them from wrapping, either remove the white space you have used for formatting, or add white-space:nowrap; to the rule for .a.

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

Here is a demonstration: http://jsfiddle.net/bfkgT/

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

#4

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

Does this do what you want?

这样做你想要的吗？

#1