在列表元素中创建基础网格
Create foundation grid within list elements
我正在尝试创建一个有序列表，其中每个 li 列表都包含 Foundation 5.5.3 网格的一部分。
我 运行 遇到的问题是，我的 li 元素在其 child 网格列之前的顶部插入了一些 space。
Example:
经过一些调查，我发现这是由于 Foundation CSS 规则将 content: " "; display: table; 放在了我的行的 ::before psuedo-element 上。
但是，覆盖/删除它会弄乱行本身的间距。
我已经尝试将 row class 从 li 本身中取出并插入 child div.row 但我仍然看到同样的问题。
重申一下，我想在 ol/ul 列表的每个 li 中创建一个 2 列网格，但这样做会在顶部添加一些垂直 space每个li。我怎样才能摆脱这个 space，或者，我应该采取另一种方法来在几个 li 秒内实现这个 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">0</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"></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"></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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
负边距方法
作为避免 space 的简单解决方法，您可以将内容 <span> 标签的负上边距设置为与行高一样高（因为这是您的伪高度-element 产生 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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
清除浮动资金的方法
另一种方法是像 content: none !important; 一样删除伪元素。现在的问题是 <li> 标签中只剩下浮动内容了。因此，您必须在每个 <li> 标签内容的末尾插入一个元素，该元素应用了 clear: both; 规则，例如<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">0</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"></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"></span>
<br class="clear" />
</li>
</ol>
</div>
</div>
这是一个非常奇怪的错误。在不更改 HTML 中的任何内容的情况下，这是我能想到的最佳解决方案：
li {
background-color: #ddd;
padding: 5px;
}
li + li {
margin-top: 5px !important;
}
li > span {
background-color: yellow;
}
.row.collapse:before {
display: block !important;
height: .02px;
}
.row.collapse {
padding: 0; /* Did you want padding? */
width: 100%;
}
<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">0</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"></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"></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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
W3C 说我的 CSS 是有效的，尽管它有点乱。
我对这个问题完全感到困惑。
CSS反击方法：
1) 返回到您尝试从 li 本身中删除行 class 并插入子项 div.row 的位置。我认为这避免了一些与列表的默认布局和列表项与行的默认布局冲突有关的问题。
2) 使用 CSS 插入您自己的带有计数器的列表编号，而不是使用默认的 <ol> 编号。这将允许您将号码放在您想要的位置。
ol {list-style-type:none; margin-left:0; padding-left:0;}
li {padding-left:2em; counter-increment:li;}
li::before {content:counter(li) "."; position:absolute; margin-left:-2em;}
Fiddle: https://jsfiddle.net/9qw2akkj/
只需添加此 css 即可解决问题...
.row .row.collapse::before, .row .row.collapse::after {
display: block!important;
height: 0;
}
这是完整的代码:)
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 .row.collapse::before, .row .row.collapse::after {
display: block!important;
height: 0;
}
<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">0</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"></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"></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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
希望对您有所帮助:)
我正在尝试创建一个有序列表，其中每个 li 列表都包含 Foundation 5.5.3 网格的一部分。
我 运行 遇到的问题是，我的 li 元素在其 child 网格列之前的顶部插入了一些 space。
Example:
经过一些调查，我发现这是由于 Foundation CSS 规则将 content: " "; display: table; 放在了我的行的 ::before psuedo-element 上。
但是，覆盖/删除它会弄乱行本身的间距。
我已经尝试将 row class 从 li 本身中取出并插入 child div.row 但我仍然看到同样的问题。
重申一下，我想在 ol/ul 列表的每个 li 中创建一个 2 列网格，但这样做会在顶部添加一些垂直 space每个li。我怎样才能摆脱这个 space，或者，我应该采取另一种方法来在几个 li 秒内实现这个 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">0</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"></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"></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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
负边距方法
作为避免 space 的简单解决方法，您可以将内容 <span> 标签的负上边距设置为与行高一样高（因为这是您的伪高度-element 产生 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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
清除浮动资金的方法
另一种方法是像 content: none !important; 一样删除伪元素。现在的问题是 <li> 标签中只剩下浮动内容了。因此，您必须在每个 <li> 标签内容的末尾插入一个元素，该元素应用了 clear: both; 规则，例如<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">0</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"></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"></span>
<br class="clear" />
</li>
</ol>
</div>
</div>
这是一个非常奇怪的错误。在不更改 HTML 中的任何内容的情况下，这是我能想到的最佳解决方案：
li {
background-color: #ddd;
padding: 5px;
}
li + li {
margin-top: 5px !important;
}
li > span {
background-color: yellow;
}
.row.collapse:before {
display: block !important;
height: .02px;
}
.row.collapse {
padding: 0; /* Did you want padding? */
width: 100%;
}
<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">0</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"></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"></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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
W3C 说我的 CSS 是有效的，尽管它有点乱。
我对这个问题完全感到困惑。
CSS反击方法：
1) 返回到您尝试从 li 本身中删除行 class 并插入子项 div.row 的位置。我认为这避免了一些与列表的默认布局和列表项与行的默认布局冲突有关的问题。
2) 使用 CSS 插入您自己的带有计数器的列表编号，而不是使用默认的 <ol> 编号。这将允许您将号码放在您想要的位置。
ol {list-style-type:none; margin-left:0; padding-left:0;}
li {padding-left:2em; counter-increment:li;}
li::before {content:counter(li) "."; position:absolute; margin-left:-2em;}
Fiddle: https://jsfiddle.net/9qw2akkj/
只需添加此 css 即可解决问题...
.row .row.collapse::before, .row .row.collapse::after {
display: block!important;
height: 0;
}
这是完整的代码:)
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 .row.collapse::before, .row .row.collapse::after {
display: block!important;
height: 0;
}
<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">0</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"></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"></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">0</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"></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"></span>
</li>
</ol>
</div>
</div>
希望对您有所帮助:)