基于弹性框

Question

我需要将ul与分隔符（应该是16px高度）分开。 我font-size的{​​{1}}也是li。

但是......由于某些原因，分隔符实际上比文本大得多。

请参阅摘录。

16px

ul {
  list-style-type: none;
  display: flex;
}

li {
  font-size: 16px;
}

li:before {
  content: '';
  background-color: #000;
  padding: 8px 1px;
  margin: 0 8px;
}

Answer 1

我回来了......

向伪元素display: inline-block;声明li:before规则，并调整高度和填充。

li:before {
    content: '';
    background-color: #000;
    padding: 0px 1px;
    margin: 0 8px;
    display: inline-block;
    height: 16px;
    vertical-align: middle;
}

ul {
  list-style-type: none;
  display: flex;
}

li {
  font-size: 16px;
}

li:before {
  content: '';
  background-color: #000;
  padding: 0px 1px;
  margin: 0 8px;
  display: inline-block;
  height: 16px;
  vertical-align: middle;
}

<ul>
  <li>hello1</li>
  <li>hello2</li>
  <li>hello3</li>
  <li>hello4</li>
  <li>hello5</li>
</ul>

Answer 2

在border

上使用li的替代方法

ul {
  list-style-type: none;
  display: flex;
}

li {
  font-size: 16px;
  border-left: 2px solid black;
  padding: 0 5px;
}

<ul>
  <li>hello1</li>
  <li>hello2</li>
  <li>hello3</li>
  <li>hello4</li>
  <li>hello5</li>
</ul>

Answer 3

如果你想了解为什么它的身高超过16px，那么它很简单：

您的伪元素默认为display: inline。所以它的高度基于font-size + padding s。如果您为display: inline-block设置li:before，则需要16px。同时设置font-size: 0也会提供16px高度。演示：

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  display: flex;
}

li {
  font-size: 16px;
}

li:before {
  content: '';
  display: inline-block; /* new */
  background-color: #000;
  padding: 8px 1px;
  margin: 0 8px;
}

＆＃13;

<ul>
  <li>hello1</li>
  <li>hello2</li>
  <li>hello3</li>
  <li>hello4</li>
  <li>hello5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

但我建议使用flexbox，只需将li设为flex-container，这将使flex-items表现为块。演示：

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  display: flex;
}

li {
  font-size: 16px;
  /* make li as flex-container */
  display: flex;
}

li:before {
  content: '';
  background-color: #000;
  padding: 8px 1px;
  margin: 0 8px;
}

＆＃13;

<ul>
  <li>hello1</li>
  <li>hello2</li>
  <li>hello3</li>
  <li>hello4</li>
  <li>hello5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

考虑将填充对齐更改为边框。在flexbox方法中，您不需要为li:before设置高度，因为弹性项目默认会拉伸：

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  display: flex;
}

li {
  font-size: 16px;
  /* make li as flex-container */
  display: flex;
}

li:before {
  content: '';
  border-left: 2px solid #000;
  margin: 0 8px;
}

＆＃13;

<ul>
  <li>hello1</li>
  <li>hello2</li>
  <li>hello3</li>
  <li>hello4</li>
  <li>hello5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;