两个内联块元素，每个元素的宽度为50％，不能并排放置在一行中

Z时代
2024-01-10
分类：问答

Width issue

Left

Right

上面的代码试图将#left div和#right div并排放置在一行中。但是，正如您在上面的JSFiddle URL中所看到的，情况并非如此。

我能够解决将div之一的宽度减小到49％的问题。但这不是理想的解决方案，因为两个div之间出现很小的间隙。

我能够解决问题的另一种方法是通过同时浮动两个div。这很好。

但是我最初的问题仍然存在。为什么当两个div都作为内联块元素保留时，它们却不能并排放置？

回答：

使用inline-block元素时，whitespace 始终存在（该空间大约为4px宽）。

因此，您的两个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>

有几种方法可以解决此问题：

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>

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>

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>

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>

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>

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>
html{
    font-size: 1em;
}
.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}
.ib-child{
    display: inline-block;
    font-size: 1rem;
}