Question

我想知道如何删除无序列表和div之间的垂直空间。我知道使用 - margin可能，但我觉得这不是一个干净的方法。

这是我的代码：

＆＃13;

 .menu {
   list-style-type: none;
   background-color: #660066;
 }
 .menu li {
   display: inline;
   padding-left: 40px;
   padding-right: 40px;
 }
 .div {
   width: 100%;
   height: 500px;
   background-color: #660066;
 }

＆＃13;

<nav>
  <ul class="menu">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
    <li>Check 4</li>
  </ul>
</nav>
<article class="div">

＆＃13;

Answer 1

在这种情况下，您的ul在顶部和底部只有标准边距。保证金：0;解决了这个问题。

<强> jsfiddle

ul{
    margin: 0;
}

Answer 2

对于UL和LI，始终执行如下所示的重置。这样，只有当你自己应用空格时才会出现空格。

ol, ul {
  margin: 0;
  padding: 0;
}

Click here to see why it is important to set a reset.

Answer 3

你必须设置你的位置，因为你要靠近原来的位置移动你的位置相对于你移动的位置可以向上或向下移动，它应该是这样的

.div

的位置是：相对于;

底部：30像素;

如何删除无序列表和div之间的空格

3 个答案: