Question

我正在尝试创建h2项目的项目符号列表。

    <ul>
   <li><h2 style="line-height:28px;font-size:35px">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

但是，如果我减少线高度足以避免子弹之间的大空间，则包裹的子弹线的空间太小。

在h2之后似乎有额外的垂直空间（可能是额外的CR？）。

Answer 1

默认情况下，浏览器会向所有标题标记添加填充和/或边距。如果你删除那个保证金，你应该好好去

h2{margin:0;padding:0}

<ul>
   <li><h2 style="line-height:28px;font-size:35px">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

Answer 2

将其添加到html的<head>部分，或者将此h2样式添加到单独的级联样式表文件中（如果有）：

<style> h2 { margin: 0; padding: 0; } </style>

Answer 3

这是因为<h2>元素的默认显示设置为block。这会自动占据整条线，推动其下方的一切。有点像在事物之后添加<br/>元素。将其更改为display: inline;以解决问题。

注意：您之后不再需要line-height属性。

＆＃13;

<ul>
   <li><h2 style="font-size:35px;display:inline;">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

＆＃13;

如果这不会占用足够的空间，您可能还需要更改margin和padding属性。 <h2>个元素在这些属性上也有一些预定义的设置。

＆＃13;

<ul>
   <li><h2 style="font-size:35px;display:inline;padding:0;margin:0;">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

＆＃13;

如何在LI之间没有垂直空间的UL为H1？

3 个答案: