Question

问题：无序列表项顶部有空格。此空间出现在Firefox 18.0.1

中

HTML：

<ul>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>

CSS：

ul {
    list-style: square;
    margin-left: 20px
}

工作演示： http://jsfiddle.net/vpdd7/

Answer 1

这似乎是列表样式与前缀/包含块元素（如h3和p）内联元素冲突的问题。如果您

，则不会发生此问题

我在CSS2.1 spec中找不到任何可以确定此行为是Firefox中的错误还是其他浏览器中的错误的内容。实际上，在list-style-position下，它表示标记框（包含项目符号）的确切位置或布局是未定义的，即使是li元素本身创建的框（主体）盒子）或其任何一个孩子。

根据您的情况，第三种选择可能是最好的解决方法，如果有的话，不会对布局造成太大影响。如果您打算将列表项的全部内容转换为链接，您也可以将其显示为块。这样一切都安全地包含在一个块框中，它的渲染非常清晰，完全可靠。

Answer 2

h3元素显示为块元素。这意味着它们占据浏览器窗口的整个宽度，并在它们上方和下方留出空间。您需要更改h3标记以显示为内联元素，这样它们就不会破坏文档的流程。您可以将块元素更改为内联元素，如下所示：

CSS：

  h3{
      display:inline;
  }

这是更新的jsFiddle

为什么在无序列表项之上有空格？

2 个答案: