【发布时间】：2016-10-31 15:48:46
【问题描述】：
我正在尝试创建一个有序列表，其中该列表的每个 li 都包含 Foundation 5.5.3 网格的一部分。
我遇到的问题是我的li 元素在其子网格列之前的顶部插入了一些空间。
示例：
经过一番调查，我发现这是由于 Foundation CSS 规则将 content: " "; display: table; 放置在我行的 ::before 伪元素上。
但是，覆盖/删除它会弄乱行本身的间距。
我尝试将row 类从li 本身中移除并插入一个子div.row，但我仍然看到同样的问题。
重申一下，我想在ol/ul 列表的每个li 中创建一个两列网格，但是这样做会在每个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>【问题讨论】：
-
如果你想要的只是一个两列的网格，为什么还要为 Foundation 的臃肿而烦恼呢？您不能只定义自己的类（和样式）吗？您的内容不是更适合表格而不是列表吗？
标签： html css layout zurb-foundation