我正在尝试创建一个有序列表,其中该列表的每个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>
