内联div没有排队td [重复]

Question

这个问题在这里已有答案：

inline-block boxes not fitting in their container [duplicate] 2回答

我无法弄清楚为什么我的底部div没有与tds排队。 table，trs和outer div都是相同的宽度（以像素为单位）。每个内联div看起来都是正确的宽度，但不知怎的，我只能适应7而不是8而且它们没有排列

html,
body {
  font-family: Consolas, monaco, monospace;
  margin:0;
}   

td{
width:12.5%;
padding:0;
}

table {
  width: 80%;
  height: 400px;
  margin:0 auto;
  text-align:center;
  padding:0;
  border-spacing:0;
}

.charttitle {
  text-align: center;
}

.bars td {
  vertical-align: bottom;
}

.bars div:hover {
  opacity: 0.6;
}

/*Flat UI colors*/

.one {
  background: #16A085;
}

.two {
  background: #2ECC71;
}

.three {
  background: #27AE60;
}

.four {
  background: #3498DB;
}

.five {
  background: #2980B9;
}

.six {
  background: #9B59B6;
}

.seven {
  background: #8E44AD;
}

.eight {
  background: #34495E;
}

.nine {
  background: #2C3E50;
}

.ten {
  background: #22313f;
}

.eleven {
  background: #F1C40F;
}

.twelve {
  background: #F39C12;
}

.thirteen {
  background: #E67E22;
}

.fourteen {
  background: #D35400;
}

.fifteen {
  background: #E74C3C;
}

.sixteen {
  background: #C0392B;
}

.seventeen {
  background: #ECF0F1;
}

.seventeen.clouds {
  color: #BDC3C7;
}

.eighteen {
  background: #BDC3C7;
}

.nineteen {
  background: #95A5A6;
}

.twenty {
  background: #7F8C8D;
}


#a1{

    content:'ABCD';
 }



#a1:hover  span {
  display: none;
}
#a1:hover:after{
  content: 'ADD to see how this works';
}

.dh{
    width:12.50000%;
    display:inline-block;


}

<body>

<table>
<tbody>
<tr><td colspan="9" class="charttitle">Students Academic Scores</td></tr>
<tr class="bars"><td>20%<div class="one" style="height: 20%;"></div></td>
<td>73%<div class="two" style="height: 73%;"></div></td>
<td>20%<div class="three" style="height: 20%;"></div></td>
<td>89%<div class="four" style="height: 89%;"></div></td>
<td>24%<div class="five" style="height: 24%;"></div></td>
<td>86%<div class="six" style="height: 86%;"></div></td>
<td>96%<div class="seven" style="height: 96%;"></div></td>
<td>71%<div class="eight" style="height: 71%;"></div></td>

</tr>


</tbody></table>
<br><br>
<div style='width:80%;margin: 0 auto'>
<div id='a1' class='dh'><span>ABCD</span></div>
   <div id='a2' class='dh'><span>AbCd</span></div>
   <div id='a3' class='dh'><span>Abcd</span></div>
   <div id='a4' class='dh'>4</div>
   <div id='a5' class='dh'>5</div>
   <div id='a6' class='dh'>6</div>
   <div id='a7' class='dh'>7</div>
   <div id='a8' class='dh'>8</div>
</div>

</body>

Answer 1

这是因为当你使用qazxsw poi时，div之间可能会产生空格，正如你在这里看到的那样（我只是添加了背景颜色）。

display: inline-block;

所以，你的解决方法是：

删除这些行之间的HTML中的所有制表符和空格，如下所示：
将<div id='a1' class='dh'><span>ABCD</span></div ><div id='a2' class='dh'><span>AbCd</span></div ><div id='a3' class='dh'><span>Abcd</span></div ><div id='a4' class='dh'>4</div><div id='a5' class='dh'>5</div ><div id='a6' class='dh'>6</div ><div id='a7' class='dh'>7</div ><div id='a8' class='dh'>8</div>添加到父div :(你没有它的类名，所以内联）：display: flex。 Flexbox将防止div之间的任何间距。

我建议你使用<div style='width:80%;margin: 0 auto; display: flex;'>。 CSS控件始终优先于HTML更改。

Answer 2

你在关闭和开放的display: flex元素之间有一个空格：div，这使你的浏览器保持</div>[spaces/new line here]<div>分开。

您可以删除该空格，或使用浮动元素。

这是一个没有空格的例子：

<div>'s

html,
body {
  font-family: Consolas, monaco, monospace;
  margin:0;
}   

td{
width:12.5%;
padding:0;
}

table {
  width: 80%;
  height: 400px;
  margin:0 auto;
  text-align:center;
  padding:0;
  border-spacing:0;
}

.charttitle {
  text-align: center;
}

.bars td {
  vertical-align: bottom;
}

.bars div:hover {
  opacity: 0.6;
}

/*Flat UI colors*/

.one {
  background: #16A085;
}

.two {
  background: #2ECC71;
}

.three {
  background: #27AE60;
}

.four {
  background: #3498DB;
}

.five {
  background: #2980B9;
}

.six {
  background: #9B59B6;
}

.seven {
  background: #8E44AD;
}

.eight {
  background: #34495E;
}

.nine {
  background: #2C3E50;
}

.ten {
  background: #22313f;
}

.eleven {
  background: #F1C40F;
}

.twelve {
  background: #F39C12;
}

.thirteen {
  background: #E67E22;
}

.fourteen {
  background: #D35400;
}

.fifteen {
  background: #E74C3C;
}

.sixteen {
  background: #C0392B;
}

.seventeen {
  background: #ECF0F1;
}

.seventeen.clouds {
  color: #BDC3C7;
}

.eighteen {
  background: #BDC3C7;
}

.nineteen {
  background: #95A5A6;
}

.twenty {
  background: #7F8C8D;
}


#a1{

    content:'ABCD';
 }



#a1:hover  span {
  display: none;
}
#a1:hover:after{
  content: 'ADD to see how this works';
}

.dh{
    width:12.50000%;
    display:inline-block;


}

内联div没有排队td [重复]

问题描述投票：0回答：2

2个回答

最新问题

内联div没有排队td [重复]

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2