Html 如何防止内联 div 跳转到父级中的下一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14044843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent inline divs from jumping to the next line within a parent?
提问by TheOne
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.
添加overflow:hidden;到 div.a 只是隐藏了第二个 div。
采纳答案by Mr. Alien
You can use position: absolute;for this, else no other way except increasing your container div width or making it nowrap
您可以使用position: absolute;此功能，除此之外别无他法，只能增加您的容器 div 宽度或制作它nowrap
Using z-indexDemo
使用z-index演示
CSS
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;
}
回答by cwharris
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;或float: left;使div并排坐。它们的工作方式不同，因此请确保为您的情况使用正确的方法。
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-blockbasically treats the element as text, so most text-formatting css properties will apply to it.
请记住 usingdisplay: inline-block基本上将元素视为文本，因此大多数文本格式的 css 属性都将应用于它。
回答by Asad Saeeduddin
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/
回答by Matt
.a {
width: 100px;
height: 50px;
border: solid 1px #345;
white-space: nowrap;
overflow:hidden; }
Does this do what you want?
这是你想要的吗？
