Html 两个行内块元素，每个 50% 宽，不能并排成一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18262300/
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
Two inline-block elements, each 50% wide, do not fit side by side in a single row
提问by Lone Learner
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/5EcPK/
JSFiddle：http: //jsfiddle.net/5EcPK/
The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.
上面的代码试图将#left div 和#right div 并排放置在一行中。但是正如您在上面的 JSFiddle URL 中看到的那样，情况并非如此。
I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/. But this is not an ideal solution because a small gap appears between the two divs.
我能够解决将其中一个 div 的宽度减小到 49% 的问题。见http://jsfiddle.net/mUKSC/。但这不是一个理想的解决方案，因为两个 div 之间出现了一个小间隙。
Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/. This works fine.
我能够解决问题的另一种方法是浮动两个 div。请参阅http://jsfiddle.net/VptQm/。这工作正常。
But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?
但我最初的问题仍然存在。为什么当两个 div 都保留为内联块元素时，它们不能并排放置？
回答by Vucko
When using inline-blockelements, there will always be an whitespaceissue between those elements(that space is about ~ 4px wide).
使用inline-block元素时，whitespace这些元素之间总会有问题（该空间大约为 ~ 4px 宽）。
So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:
所以，你的两个divs，都有 50% 的宽度，加上whitespace(~ 4px) 的宽度超过 100%，所以它打破了。您的问题示例：
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div>
<div class="right">bar</div>There is a few ways to fix that:
有几种方法可以解决这个问题：
1. No space between those elements
1. 这些元素之间没有空格
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div><div class="right">bar</div>2. Using HTML comments
2. 使用 HTML 注释
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div><!--
--><div class="right">bar</div>3. Set the parents font-sizeto 0, and then adding some value to inline-blockelements
3. 将父项设置font-size为0，然后为inline-block元素添加一些值
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>4. Using a negative margin between them (not preferable)
4. 在它们之间使用负边距（不可取）
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div>
<div class="right">bar</div>5. Dropping closing angle
5.下降闭合角
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>6. Skipping certainHTML closing tags(thanks @thirtydot for the reference)
6. 跳过某些HTML 结束标记（感谢 @thirtydot 的参考）
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<ul>
<li class="left">foo
<li class="right">bar
</ul>References:
参考：
- Fighting the Space Between Inline Block Elements on CSS Tricks
- Remove Whitespace Between Inline-Block Elements by David Walsh
- How to remove the space between inline-block elements?
As @MarcosPérezGudesaid, the bestway is to use rem, and add some default value to font-sizeon the htmltag (like in HTML5Boilerplate). Example:
正如@MarcosPérezGude所说，最好的方法是使用rem，并font-size在html标签上添加一些默认值（如在HTML5Boilerplate 中）。例子：
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
Update: as it's nearly 2018. , use flexboxor even better - CSS grid layout.
回答by Matrix
good answer in css3 is:
css3 中的好答案是：
white-space: nowrap;
in parent node, and :
在父节点中，并且：
white-space: normal;
vertical-align: top;
in div (or other) at 50%
在 div（或其他）中 50%
exemple : http://jsfiddle.net/YpTMh/19/
示例：http: //jsfiddle.net/YpTMh/19/
EDIT:
编辑：
there is another way with :
还有另一种方式：
font-size: 0;
for parent node and override it in child node
对于父节点并在子节点中覆盖它
回答by Dan
It's because the whitespace between your two divs is being interpreted as a space. If you put your <div>tags in line as shown below the problem is corrected:
这是因为您的两个 div 之间的空白被解释为一个空格。如果您将<div>标签按如下所示排列，问题将得到纠正：
<div id="left"></div><div id="right"></div>
回答by Michiel van Oosterhout
Because there is a space between the elements. If you remove all whitespace, they will fit.
因为元素之间有一个空格。如果您删除所有空格，它们将适合.
<div id="left">Left</div><div id="right">Right</div>
回答by vittore
Either make them block instead of inline-block. This will render divs ignoring spaces between them.
要么让它们阻塞而不是内联块。这将使 div 忽略它们之间的空格。
display:block;
or remove space between tags
或删除标签之间的空间
<div id='left'></div><div id='right'></div>
or add
或添加
margin: -1en;
to one of the divs in order to mitigate space taken by single space rendered.
到其中一个 div，以减少渲染的单个空间占用的空间。
回答by nbixler
Flexbox example - this would be used for the parent class holding the two side by side elements.
Flexbox 示例 - 这将用于包含两个并排元素的父类。
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
回答by Vaneet Thakur
Please check below code:
请检查以下代码：
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}<div id="left">Left</div>
<div id="right">Right</div>回答by Vish
It can be done by adding the css display:inline to the div that holds the inline elements.
可以通过将 css display:inline 添加到包含内联元素的 div 来完成。
While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.
在使用带有负值的边距删除空白时，有必要将其添加到此特定元素中。因为将它添加到类会影响使用该类的地方。
So it would be safer to use display:inline;
所以使用 display:inline; 会更安全。
回答by Tatenda
add float: left;to both div tags.
添加浮动：左；到两个 div 标签。
div {
float: left;
}