Question

我正在尝试生成一个网页，其中的图表显示了一个单词如何分解为位字段。我希望它出现的方式是每个字段显示为一行框（每个框一位），并且字段由一些空格分隔。每个字段下方都有一个标签。这就是我尝试过的：

<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。）

Answer 1

您可以使用HTML清理器，但问题是 display:inline-block 创建间隙，因此您需要删除HTML标记之间不必要的空格或将font-size重置为0。

在这里查看：

Fighting the Space Between Inline Block Elements

上面的链接还有更多解决方案。

另外，您可以使用 display:block; float:left 。

Answer 2

组合这样的元素将删除空格

<span style="display:inline-block;">Hello</span><span style="display:inline-block;">World</span>

我知道这很麻烦，但不知何故。你想把这些样式放在外部样式表中，而不是像我在这里那样内联。

消除水平元素之间的空间

2 个答案: