Question

如何删除总是出现在html列表上方的跳过的行？例如，在下面的代码中，我有一行描述列表的文本，后面是列表本身。在描述之后和列表中的第一个项目之前有一个难看的空白行。 如何更改以下代码，以便第一个列表项位于说明的正下方？

清单说明：

第一项。
第二项。
第三项。

以下是需要更改的代码：

<i>Description of list:</i>
<ul>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Third item.</li>
</ul>

Answer 1

我不确定我是否理解正确但请查看此fiddle

浏览器在UL的顶部和底部放置默认边距，因此您可以使用...

删除边距

ul{margin-top: 0;}

Answer 2

它是列表顶部的默认margin。您可以使用CSS删除 - 或减少它。

＆＃13;

ul {
  margin-top: 0;
}

＆＃13;

<i>Description of list:</i>
<ul>
  <li>First item.</li>
  <li>Second item.</li>
  <li>Third item.</li>
</ul>

＆＃13;

Answer 3

为元素提供ID＆＃39; ul＆＃39;然后使用向上移动元素边距

DEMO：http://jsfiddle.net/oc8mdc2s/2/

<i >Description of list:</i>
<ul id="listing">
    <li>First item.</li>
    <li>Second item.</li>
    <li>Third item.</li>
</ul>



#listing{
    margin-top:-0.01%;
}

Answer 4

要删除描述和列表项之间的空格，您需要重置未排序的列表项属性

<强> CSS

ul {
  padding:0;
  margin:0;
}

上面的代码将重置默认浏览器属性，这些属性将应用于Un ordered list item。

Answer 5

您应该考虑阅读有关重置每个标记的CSS样式和默认值的信息。在您的示例中，您可以尝试使用

ul {margin:0;}

或只是重置其中一个边距。

删除无序列表上方的跳过行

5 个答案: