实施例

Question

我尝试创建一个有序列表，其中该列表的每个li都包含Foundation 5.5.3网格的一部分。

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

实施例

经过一番调查后，我发现这是由于基金会CSS规则将content: " "; display: table;放在我行的::before psuedo元素上。

然而，覆盖它/移除它会弄乱行本身的间距。

我已经尝试将row课程从li本身移除并插入一个孩子div.row，但我仍然看到同样的问题。

重申一下，我想在li列表的每个ol/ul内创建一个2列网格，但这样做会在每个{{1}的顶部添加一些垂直空间}}。我怎样才能摆脱这个空间，或者，我应该采取另一种方法来在几个li s内实现这个2列网格。

感谢。

实施例

＆＃13;

li

＆＃13;

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;
}

＆＃13;

Answer 1

负边际方法

作为避免空间的简单解决方法，您可以将内容<span>标记的负上边距设置为与行高一样高（因为这是伪元素与{{{{ 1}}：

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;
}

clear-the-float方法

另一种方法是删除伪元素，就像使用<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;。

<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;
}

Answer 2

这是一个非常奇怪的错误。不改变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">$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>

W3C说我的CSS是有效的，虽然它有点像黑客。
我对这个问题感到非常困惑。

Answer 3

CSS计数器方法：

1）返回到您尝试从li本身取出行类并插入子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;}

小提琴：https://jsfiddle.net/9qw2akkj/

Answer 4

只需添加此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">$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>

希望有所帮助：）

在列表元素

实施例

实施例

4 个答案:

负边际方法

clear-the-float方法