Question

我目前遇到的问题是，当一个表格单元格不包含任何内容时，格式化将被抛弃，尽管尝试了各种技术，但无法使其以与内容相同的方式显示内联。

    <ul class="uk-wizard-progress">
        <li class="uk-complete">Welcome</li>
        <li class="uk-active"></li>
        <li>Source</li>
    </ul>

示例：http://codepen.io/nblackburn/pen/MKRVXa

我需要支持已填充和未填充的表格单元格，但是如果可能的话，我希望用 only CSS 来解决这个问题。

提前致谢。

Answer 1

li::after { content:"\00a0"; }

Answer 2

只需将content中的li:before更改为'\00a0'即可：

li:before {
  height: 10px;
  display: block;
  margin-top: 5px;
  content: '\00a0';
  background: #dddddd;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}

或者按照Scott Marcus的建议将content: '\0020'添加到li:after。这样可以防止在表格单元格内容之前出现额外空间：

li:after {
 content: '\0020';
 /* ... */
}

这实际上是一种最佳做法。

来源：Add a space (" ") after an element using :after

让空表格单元格与内容相似

2 个答案: