<分区>
<分区>
我正在尝试生成一个带有图表的网页，该图表显示了一个词是如何分解成位域的。我希望它出现的方式是让每个字段显示为一行框(每个框一个位)，并且字段由一些空格分隔。每个字段下方都会有一个标签。这是我试过的:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE type="text/css">
.left-bit { border-style: solid dotted solid solid; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.middle-bit { border-style: solid dotted solid none; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.right-bit { border-style: solid solid solid none; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.single-bit { border-style: solid; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.bit-field-label { font-size: smaller; font-weight: bold }
</STYLE>
</HEAD>
<BODY>
<DIV style="text-align: center">
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="single-bit">a</SPAN>
</CODE><BR>
<SPAN style="display: inline-block" class="bit-field-label">field A</SPAN>
</DIV>
<SPAN style="padding-right: 0.1in"></SPAN>
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="left-bit">b</SPAN>
<SPAN class="middle-bit">b</SPAN>
<SPAN class="right-bit">b</SPAN>
</CODE><BR>
<SPAN class="bit-field-label">field B</SPAN>
</DIV>
<SPAN style="padding-right: 0.1in"></SPAN>
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="left-bit">c</SPAN>
<SPAN class="middle-bit">c</SPAN>
<SPAN class="middle-bit">c</SPAN>
<SPAN class="middle-bit">j</SPAN>
<SPAN class="right-bit">c</SPAN>
</CODE><BR>
<SPAN class="bit-field-label">field C</SPAN>
</DIV>
</DIV>
</BODY>
</HTML>
基本上，我尝试过使用边框为每一位设置一个框；每个位字段和它下面的标签应该在他们自己的“盒子”中，比特行和标签在盒子内居中，然后每个盒子之间水平有一个固定大小的间隙，然后是整个事情是居中的。
结果几乎是正确的，只是我无法让每个字段中的位相互竞争。 Here's a screenshot .如您所见，我尝试通过将边距、字母间距和字间距设置为 0 来消除位之间的空间，但无济于事。我还尝试将每个组放入另一个 DIV像这样:
<DIV style="display: inline-block">
<SPAN class="left-bit">b</SPAN>
<SPAN class="middle-bit">b</SPAN>
<SPAN class="right-bit">b</SPAN>
</DIV>
没有效果。
关于是什么控制了盒子之间的这个空间，以及如何覆盖它所做的一切，有什么想法吗？ (我对其他方法持开放态度，我可能不得不尝试某种 <TABLE> ，但即使我必须改变我的方法，我也很乐意解释正在发生的事情。)
我使用的是 Chrome 37.0。我还没有在其他浏览器上尝试过这个(除了早期版本的 IE，它显然根本无法识别 inline-block。)
最佳答案
您可以让您的 HTML 更干净，但问题是 display:inline-block 会产生间隙，因此您需要删除 HTML 标签之间不必要的空格或重置字体-大小为 0。
在这里检查:
Fighting the Space Between Inline Block Elements
上面的链接有更多的解决方案。
此外，您还可以使用 display:block; float:left 代替。
关于html - 消除水平元素之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25859242/
相关文章：
javascript - 我怎样才能让标志不超过固定的导航栏？
CSS flex 盒 : filling blank space between vertical elements
javascript - 带有 <NavLink> 的 Blazor 子菜单
html - 如何在不指定高度的情况下让多个div显示在偶数行中？
javascript - 允许在 tbody 内水平和垂直滚动表格
javascript - 如何获取 HTML5 Canvas 中鼠标在对象上的第一个和最后一个位置？