Question

我正在创建一个这样的水平菜单：

.leftNav li{
    list-style: none;
    padding: 1em;
    font-size: 1em;
    display: inline;
    color: #fff;
}
.leftNav li::after{
    content: " | ";
}

我得到了：

menu item 1 |      menu item 2 |      menu item 3 |

我希望每个人之间的间距相等：

menu item 1   |   menu item 2   |   menu item 3 |

我认为margin或padding可以解决这个问题，但事实并非如此。

Answer 1

由于::after伪元素位于li内，padding将在其后应用，而不是其中任何一方。尝试将padding添加到.leftNav li::after而不是li。

＆＃13;

.leftNav li {
  list-style: none;
  font-size: 1em;
  display: inline;
}
.leftNav li::after {
  content: " | ";
  padding: 1em;
}
.leftNav li:last-child::after {
  content: "";
  padding: 0;
}

＆＃13;

<ul class="leftNav">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>

＆＃13;

Answer 2

伪元素被认为是父元素内容的一部分，因此填充在内容和管道之外。尝试将填充添加到::after伪元素。

.leftNav li{
    list-style: none;
    font-size: 1em;
    display: inline;
    color: #fff;
}
.leftNav li::after{
    content: " | ";
    padding: 1em;
}

Answer 3

为::after元素设置填充，而不是列表元素。

.leftNav li {
  list-style: none;
  font-size: 1em;
  display: inline;
  color: #000;
}
.leftNav li::after {
  content: " | ";
  padding: 1em;
}

<ul class="leftNav">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

::在保证金和填充之后

3 个答案: