用HTML控制两个UL之间的空间

Question

我有以下代码：

<ul id="First">
  <li>First item</li>
  <li>Second item</li>
</ul>
<ul id="Second">
  <li>Third item</li>
</ul>

目的是通过使用简单的javascript线来控制是否显示第一个或第二个列表。例如：

document.getElementById('First').style.display = 'block';
document.getElementById('Second').style.display = 'none';

问题是我希望这三个项目只是一个列表，以防我决定同时显示两个项目，但我得到一个列表，一个空格，然后是第二个列表。像这样：

第一项

第二项

第三项

如何删除两个列表之间的空格？

Answer 1

我会添加

style="margin:0;"

这样的ul标签：

<ul style="margin:0" id="First">
  <li>First item</li>
  <li>Second item</li>
</ul>
<ul style="margin:0" id="Second">
  <li>Third item</li>
</ul>

这是一个简单的jsfiddle：https://jsfiddle.net/5c0getsL/2/

Answer 2

在 css文件中执行以下操作

ul{
  margin : 0 auto;
}

并在 html标记中写为

<ul id="First">
<li>First item</li>
<li>Second item</li>
</ul>
<ul id="Second">
<li>Third item</li>
</ul>

使用此功能，您可以根据需要添加多个ul 并显示相同的样式。