我无法弄清楚为什么我的底部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;
答案 0 :(得分:2)
在结束和开放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;
}
&#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;
答案 1 :(得分:1)
当你使用display: inline-block;
时会发生这种情况,可能会在div之间生成空格,正如你在这里看到的那样(我刚刚添加了背景颜色)。
所以,你的解决方法是:
删除这些行之间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>
将display: flex
添加到父div :(您没有类名,因此在内联中):<div style='width:80%;margin: 0 auto; display: flex;'>
。
Flexbox将防止div之间的任何间距。
我建议您使用display: flex
。 CSS控件总是优先于HTML更改。