内联div没有排队等待td' s

时间:2017-12-15 21:51:50

标签: html css

我无法弄清楚为什么我的底部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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

在结束和开放div元素之间有一个空格:</div>[spaces/new line here]<div>,这会让您的浏览器保持<div>'s分开。

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

以下是没有空格的示例:

&#13;
&#13;
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;


}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

当你使用display: inline-block;时会发生这种情况,可能会在div之间生成空格,正如你在这里看到的那样(我刚刚添加了背景颜色)。

enter image description here

所以,你的解决方法是:

  1. 删除这些行之间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>
    
  2. display: flex添加到父div :(您没有类名,因此在内联中):<div style='width:80%;margin: 0 auto; display: flex;'>。 Flexbox将防止div之间的任何间距。

  3. 我建议您使用display: flex。 CSS控件总是优先于HTML更改。