Question

通常这样的事情会强制.free-entry元素进入新行......

.free-entry:before {
    content: '\A';
    white-space: pre;
}

但是我遇到了一个无法让它发挥作用的案例。

我有一个无序列表，每个li内都有一个.free-entry元素。我试图强迫.free-entry元素进入一个新线但没有运气......

li .free-entry:before {
    content: '\A';
    white-space: pre;
}

通常情况display:block可以正常使用，但li为display:table-row，因此阻止无效。

li {
    display:table-row;
}

为了更加清晰，这是一个fiddle。

Answer 1

这不起作用的原因是.free-entry是input元素。

input为1的替换元素不支持伪元素。

因此.free-entry:before {...}什么都不做。

有关详细信息，请参阅this post

作为解决方法，您可以在标签上放置：after伪元素，如下所示：

label:after {
    content: '\A';
    white-space: pre;
}

<强> FIDDLE

li {
  display: table-row;
}
label:after {
  content: '\A';
 white-space: pre;
}

<ul>
  <li>
    <input type="checkbox" value="Other" name="choosemanytest_other[5]" checked="" />
    <label>Other</label>
    <input type="text" class="free-entry" value="A Tiger" />
  </li>
</ul>

Answer 2

嘿，我认为您可以通过将自由条目更改为显示来解决它：阻止

li .free-entry {
        display: block;
}

使用带有before伪选择器的内容来强制换行

2 个答案: