在列表元素中创建基础网格

Question

我正在尝试创建一个有序列表,其中每个li列表都包含Foundation 5.5.3网格的一部分.

我遇到的问题是,我的li元素是在其子网格列之前的顶部插入一些空格.

例:

经过一些调查,我发现这是由于基础CSS规则content: " "; display: table;放在::before我的行的psuedo元素上.

然而,重写/删除它会弄乱行本身的间距.

我试过把这个row课脱离li自己并插入一个孩子,div.row但我仍然看到同样的问题.

要重申的是,我想内的每一个创建一个2柱网li的的ol/ul名单,但这样做,在每个顶部增加了一些垂直空间li.我怎样才能摆脱这个空间,或者,我应该采取另一种方法来在几个lis 内实现这个2列网格.

谢谢.

---

例:

li {
  background-color: #ddd;
  padding: 5px;
}

li + li {
  margin-top: 5px !important;
}

li > span {
  background-color: yellow;
}

/* Trying to override ::before and ::after on .row */
.row.psuedo-override::before, .row.psuedo-override::after {
  content: none !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

<hr>

<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5>
    <ol>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

Answer 1

负保证金法

作为避免空格的简单解决方法，您可以将内容<span>标签的负上边距设置为与行高一样高（因为这是伪元素生成的高度content: " ";：

li > span {
  margin-top: -1.6rem;
}

权衡：这仅在您line-height不更改时才有效（例如，由于响应性，在这种情况下您将必须根据您的媒体查询调整此值）。

li {
  background-color: #ddd;
  padding: 5px;
}
li + li {
  margin-top: 5px !important;
}
li > span {
  background-color: yellow;
  margin-top: -1.6rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" />
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

清仓方法

另一种方法是删除伪元素，就像您对content: none !important;. 现在的问题是标签中只剩下浮动内容<li>。<li>因此，您必须在每个标签内容的末尾插入一个应用了clear: both;规则的元素，例如 a <br>。

<br class="clear" />

.clear {
  clear: both;
}

权衡：您必须更改标记，并且您的枚举会消失。

li {
  background-color: #ddd;
  padding: 5px;
}
li + li {
  margin-top: 5px !important;
}
li > span {
  background-color: yellow;
  display: inline-block;
}
.row::before, .row::after {
    content: none !important;
}
.clear {
  clear: both;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" />
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
        <br class="clear" />
      </li>
      <li class="row">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
        <br class="clear" />
      </li>
      <li class="row">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
        <br class="clear" />
      </li>
    </ol>
  </div>
</div>