0

我遇到了一个我以前从未注意到的奇怪问题。我有以下代码：

<div class="feedback">
  <span> Was this helpful?</span>
  <ul>
    <li>
      <a href="#">Yes</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
  </ul>
</div>

非常简单的代码块。忽略第二个不，因为它实际上只是给我第三个li来帮助我解决这个问题。现在，这是CSS...

div.feedback {
  position: relative;
}
span {
  float: left;
}
li {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-left: 1px solid #000
}

现在，这就是正在发生的事情：

左边框

看到似乎不知从何而来的额外间距？我border-right只是为了测试它，得到了更加不一致的结果：

右边界

现在，第 3 个 LI 应该有 0padding和margin。另外两个还有空位。

最后，浏览器理解 的height和width，li并将 nomargin或属性归于padding它。根据浏览器的说法，文本应该被撞到边框上，正如我所期望的那样。

浏览器看不懂

有人可以解释一下文本右侧额外的 3-5 像素间距是什么吗？

4

3 回答 3

2

这是因为换行符在 HTML 中被视为空格。您已将内部元素指定为inline-block，这意味着显示它们之间的空格。

您可以：

  1. 将 parent 上的 font-size 设置为 0，然后在<li>,上恢复正常
  2. 只需消除<li>s 之间的换行符。

存在第三个（较小的）选项，它是使用float.

float最初是为了允许元素被推到容器的边缘，同时让文本在它周围自由流动（就像报纸上的图像）。该功能也被用于布局，当人们发现它会使块级元素水平堆叠时。

使用float意味着您需要clear通过使用clearfix或在其上clear: both设置一个元素来追求自己。

这个选项较少，因为很像表格布局，它不是最初的目的float，不同浏览器和不同时间段的实现可能不同，但最重要的是，它增加了清除的开销问题。display: inline-block（如果你能帮上忙，那就坚持吧！）

于 2012-12-04T20:46:43.357 回答
0

它来自代码中的空白。请参阅此jsFiddle 示例

<div class="feedback">
  <span> Was this helpful?</span>
  <ul>
    <li>
      <a href="#">Yes</a>
    </li><li>
      <a href="#">No</a>
    </li><li>
      <a href="#">No</a>
    </li>
  </ul>
</div>​
于 2012-12-04T20:45:24.477 回答
0

某处你有一个显示：内联块。

内嵌块显示的行为是这样的。它将代码中的任何空格和换行符显示为空格。

您必须手动删除 HTML 中的空格和返回，或者将显示更改为其他内容。

于 2012-12-04T20:50:26.233 回答