Html 内联div'；s没有与td'；s

我不明白为什么我的下盘没有和tds对齐。表、trs和外部div的宽度都是相同的，以像素为单位。每个内联div看起来都是正确的宽度，但不知何故，我只能容纳7个而不是8个，而且它们没有对齐

html，
身体{
字体系列：Consoleas、摩纳哥、monospace；
保证金：0；
}   
运输署{
宽度：12.5%；
填充：0；
}
桌子{
宽度：80%；
高度：400px；
保证金：0自动；
文本对齐：居中；
填充：0；
边界间距：0；
}
.图表标题{
文本对齐：居中；
}
.bars运输署{
垂直对齐：底部对齐；
}
.酒吧部：悬停{
不透明度：0.6；
}
/*平面用户界面颜色*/
.一{
背景：#16A085；
}
.二{
背景：#2ECC71；
}
.三{
背景：#27AE60；
}
.4{
背景：#3498DB；
}
.5{
背景#2980B9；
}
.6{
背景：#9B59B6；
}
.7{
背景：#8E44AD；
}
.8{
背景#34495E；
}
.9{
背景#2C3E50；
}
.10{
背景：#22313f；
}
.11{
背景：#F1C40F；
}
十二{
背景：#F39C12；
}
十三{
背景：#E67E22；
}
十四{
背景：#D35400；
}
.15{
背景：#E74C3C；
}
十六{
背景：#C0392B；
}
十七{
背景#ECF0F1；
}
17.云{
颜色：#BDC3C7；
}
十八{
背景：#BDC3C7；
}
十九{
背景#95A5A6；
}
.二十{
背景#7F8C8D；
}
#a1{
内容:"ABCD";；
}
#a1：悬停跨度{
显示：无；
}
#a1：悬停：之后{
内容：“添加以查看其工作原理”；
}
徖生署署长{
宽度：12.50000%；
显示：内联块；
}

学生学业成绩
20%
73%
20%
89%
24%
86%
96%
71%



ABCD
AbCd
Abcd
4.
5.
6.
7.
8.

您在结束和开始之间有一个空格

div

元素：

[空格/新行在这里]

这使得您的浏览器保持

的

分开

您可以删除该空间，或者改用浮动元素

下面是一个没有空格的示例：

html，
身体{
字体系列：Consoleas、摩纳哥、monospace；
保证金：0；
}   
运输署{
宽度：12.5%；
填充：0；
}
桌子{
宽度：80%；
高度：400px；
保证金：0自动；
文本对齐：居中；
填充：0；
边界间距：0；
}
.图表标题{
文本对齐：居中；
}
.bars运输署{
垂直对齐：底部对齐；
}
.酒吧部：悬停{
不透明度：0.6；
}
/*平面用户界面颜色*/
.一{
背景：#16A085；
}
.二{
背景：#2ECC71；
}
.三{
背景：#27AE60；
}
.4{
背景：#3498DB；
}
.5{
背景#2980B9；
}
.6{
背景：#9B59B6；
}
.7{
背景：#8E44AD；
}
.8{
背景#34495E；
}
.9{
背景#2C3E50；
}
.10{
背景：#22313f；
}
.11{
背景：#F1C40F；
}
十二{
背景：#F39C12；
}
十三{
背景：#E67E22；
}
十四{
背景：#D35400；
}
.15{
背景：#E74C3C；
}
十六{
背景：#C0392B；
}
十七{
背景#ECF0F1；
}
17.云{
颜色：#BDC3C7；
}
十八{
背景：#BDC3C7；
}
十九{
背景#95A5A6；
}
.二十{
背景#7F8C8D；
}
#a1{
内容:"ABCD";；
}
#a1：悬停跨度{
显示：无；
}
#a1：悬停：之后{
内容：“添加以查看其工作原理”；
}
徖生署署长{
宽度：12.50000%；
显示：内联块；
}

学生学业成绩
20%
73%
20%
89%
24%
86%
96%
71%



ABCD45678

您在结束和开始之间有一个空格

div

元素：

[空格/新行在这里]

这使得您的浏览器保持

的

分开

您可以删除该空间，或者改用浮动元素

下面是一个没有空格的示例：

html，
身体{
字体系列：Consoleas、摩纳哥、monospace；
保证金：0；
}   
运输署{
宽度：12.5%；
填充：0；
}
桌子{
宽度：80%；
高度：400px；
保证金：0自动；
文本对齐：居中；
填充：0；
边界间距：0；
}
.图表标题{
文本对齐：居中；
}
.bars运输署{
垂直对齐：底部对齐；
}
.酒吧部：悬停{
不透明度：0.6；
}
/*平面用户界面颜色*/
.一{
背景：#16A085；
}
.二{
背景：#2ECC71；
}
.三{
背景：#27AE60；
}
.4{
背景：#3498DB；
}
.5{
背景#2980B9；
}
.6{
背景：#9B59B6；
}
.7{
背景：#8E44AD；
}
.8{
背景#34495E；
}
.9{
背景#2C3E50；
}
.10{
背景：#22313f；
}
.11{
背景：#F1C40F；
}
十二{
背景：#F39C12；
}
十三{
背景：#E67E22；
}
十四{
背景：#D35400；
}
.15{
背景：#E74C3C；
}
十六{
背景：#C0392B；
}
十七{
背景#ECF0F1；
}
17.云{
颜色：#BDC3C7；
}
十八{
背景：#BDC3C7；
}
十九{
背景#95A5A6；
}
.二十{
背景#7F8C8D；
}
#a1{
内容:"ABCD";；
}
#a1：悬停跨度{
显示：无；
}
#a1：悬停：之后{
内容：“添加以查看其工作原理”；
}
徖生署署长{
宽度：12.50000%；
显示：内联块；
}

学生学业成绩
20%
73%
20%
89%
24%
86%
96%
71%



ABCD45678

当您使用

显示：内联块时，会发生这种情况，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>

ABCD45678

将
display:flex
添加到父div：（您没有它的类名，所以是内联的）：
。
Flexbox将防止div之间出现任何间距

我建议您使用
display:flex
。CSS控件总是优先于HTML更改。
当您使用
显示：内联块，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>

ABCDA