Question

我有一个奇怪的行为，我无法解释：当我写一个带有<li>标签的简单html文件后跟一个标题（或实际上是任何标记）时，我有一个换行符子弹和内容之间...

这是一个简单的例子：

＆＃13;

<h1>Title</h1>
    
    <li>
    	<h1>First topic</h1>
    	<p>Bla bla bla</p>
    </li>
    <li>
    	<h2>Second topic</h2>
    	<p>Bla bla bla</p>
    </li>

＆＃13;

Answer 1

有效的html确实需要围绕<ol>的{{1}}或<ul>封装。但是，您在列表元素之间观察到的“额外行间距”可能是<li>和<h1>元素的固有顶部边距或<h2>标记的底部边距。您可以通过添加css来消除该间距，以便在嵌套在<p>

中时消除顶部和底部边距或这些元素周围的填充

这种css的一个例子可能是：

<li>

理想情况下，您应该添加类来定位和设置元素的样式，这样您就不会无意中更改边距和填充页面/网站范围。

Answer 2

＆＃13;

<h1>Title</h1>
    
<ul>        
    <li>
    	<h1>First topic</h1>
    	<p>Bla bla bla</p>
    </li>
    <li>
    	<h2>Second topic</h2>
    	<p>Bla bla bla</p>
    </li>
</ul>

＆＃13;

查看this以获取有关HTML列表的更多信息。

Answer 3

我认为你需要在列表项标签之前放置无序列表标签？例如：

<ul>
  <li>Text</li>
  <li>text</li>
  <li>Text</li>
</ul>

Answer 4

我认为这是因为你使用了H1元素。这个元素是块元素，它自动移动行。尝试使用span insread或强制h1元素为任何css的内联元素，如：

h1{

     display:inline;
}

<li>子弹后的新行

4 个答案: