Question

所以我有一个包含项目的列表。该列表看起来有点像桌子。每个列表项代表一行。每个段落代表一列。表只有2列。因此第一段应浮动到左侧，第二段浮动到右侧。

这就是我的所作所为：
没有真正的html / css，只是一些伪代码。但我想你明白了。

ul list-style-type none
  li
    p float left
    p float right
    div clear both
  li
    ...
  li
    ...
  ..
/ul

然而，每个项目周围都有一些非常大的利润：但我希望每个项目之间的差距非常小。我已经用div元素替换了段落，这使得它更好一些。但这仍然是一个很大的余地。

然后我强迫（!important）将这个结尾归为0，这根本没有帮助。否定保证金有效。万岁..但这有点傻，不是吗？

所以我的实际问题是：是否有其他/更好的方法来减少列表项之间的差距[但设置负边距]？

Answer 1

根据我的评论：

段落自然有余...

ul{
  list-style: none;
  }
li{
  /* To demonstarte issue */
  background: #dadada;
  border: 1px solid #000;
  }
p{
  background: red;
  }
/* Self clear content */
li:after{
  clear: both;
  content: "";
  display: table;
  }
.left{
  float: left;
  width: 40%;
  }
.right{
  float: right;
  width: 40%;
  }

<ul>
  <li>
    <p class="left">Left floated paragraph</p>
    <p class="right">Right floated paragraph</p>
    </li>
  <li>
    <p class="left">Left floated paragraph</p>
    <p class="right">Right floated paragraph</p>
    </li>
  </ul>

重置保证金后......

ul{
  list-style: none;
}
li{
  /* To demonstarte issue */
  background: #dadada;
  border: 1px solid #000;
  margin: 0;
}
p{
  background: red;
  /* Remove the "natural" margin */
  margin: 0;
}
/* Self clear content */
li:after{
  clear: both;
  content: "";
  display: table;
}
.left{
  float: left;
  width: 40%;
}
.right{
  float: right;
  width: 40%;
}

<ul>
  <li>
    <p class="left">Left floated paragraph</p>
    <p class="right">Right floated paragraph</p>
  </li>
  <li>
    <p class="left">Left floated paragraph</p>
    <p class="right">Right floated paragraph</p>
  </li>
</ul>

...假设这是你要追求的东西？

列表项之间的垂直边距

1 个答案: