Question

提前感谢您的帮助！我用这段代码创建了一个菜单：

<div class="img-nav">
        <ul>
            <li>
                <a href="#">places</a>
            </li>
            <li>
                <a href="#">people</a>
            </li>
            <li>
                <a href="#">abstract</a>
            </li>
            <li>
                <a href="#">funny</a>
            </li>
        </ul>
    </div>

然后我添加了＆＃34; /＆＃34;在每个菜单项后签名：

.img-nav li:after {
    content: " / ";
}

.img-nav li:last-child:after {
    content: " ";
}

问题是，如果我为我的项目添加一个保证金，那么＆＃34; /＆＃34;不是这样的中心：

ITEM1/  ITEM2/  ITEM3/  ITEM4

如何重新定位或移动＆＃34; /＆＃34;再次居中？谢谢大家！

Answer 1

您可以为:after伪造选择器添加相等的边距，使其看起来相等。

.img-nav li {
    display: inline;
    margin-left:5px;
}

.img-nav li:after {
    content: " / ";
    margin-left: 5px;
}

.img-nav li:last-child:after {
    content: " ";
}

这是我的jsfiddle

我希望这会有所帮助。

Answer 2

在伪元素上使用填充。

ul {
  text-align: center;
}
.img-nav ul li {
  display: inline-block;
}
.img-nav li:after {
  content: " / ";
  margin: 0 1em;
  display: inline-block;
}
.img-nav li:last-child:after {
  content: " ";
}

<div class="img-nav">
  <ul>
    <li>
      <a href="#">places</a>
    </li>
    <li>
      <a href="#">people</a>
    </li>
    <li>
      <a href="#">abstract</a>
    </li>
    <li>
      <a href="#">funny</a>
    </li>
  </ul>
</div>

移动使用伪元素添加的内容：

2 个答案: