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

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

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

Example:

07001

经过一番调查后,我发现这是由于基金会CSS规则放置内容：“”;显示：表;在我行的psuedo-element之前的::.

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

我已经尝试从li本身取出行类并插入一个子div.row但我仍然看到同样的问题.

重申一下,我想在ol / ul列表的每个li中创建一个2列网格,但这样做会在每个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,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>

解决方法

负边际方法

作为避免空间的简单解决方法,您只需为内容设置负的上边距< span>标签与行高一样高(因为这是伪元素与内容产生的高度：“”;：

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

权衡：仅当您的行高未发生变化时才有效(例如,由于响应性,在这种情况下,您必须根据媒体查询调整此值).

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,id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

清算浮动的方法

另一种方法是删除伪元素,就像你使用content：none！important;一样.现在的问题是< li>中只剩下浮动内容了.标签.因此,您必须在每个< li>的末尾插入一个元素.标签内容,有明确的：两者;规则适用,例如< 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,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>