Question

要实现this layout of a fully justified menu list，我不能使用CSS伪类来显示列表项之间的分隔符;相反，我必须将分隔符直接放在HTML中。由于<ul>仅允许<li>中的according to HTML5 standard和支持脚本的元素，因此我制作了以下代码。它是有效的HTML5但对我来说似乎很古怪。有什么顾虑吗？

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

li.home {
  padding: 0;
}

li,
script::after {
  vertical-align: middle;
  padding-top: 10px;
}

nav {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 40px;
}

script.separator {
  display: block;
}

script.separator::after {
  content: "*";
}

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <script class="separator"></script>
    <li class="second"><a href="#">Item 1</a></li>
    <script class="separator"></script>
    <li><a href="#">Item 2</a></li>
    <script class="separator"></script>
    <li><a href="#">One more Item</a></li>
    <script class="separator"></script>
    <li><a href="#">Another Item</a></li>
    <script class="separator"></script>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

将<script>替换为另一个<li>，只需使用

为其指定一种样式即可

ul li:nth-of-type(even) {
    display: block;
    content: "*";
    vertical-align: middle;
    padding-top: 10px;
}

这将产生相同的效果，但在代码视图上看起来会更加整洁。

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <li></li>
    <li class="second"><a href="#">Item 1</a></li>
    <li></li>
    <li><a href="#">Item 2</a></li>
    <li></li>
    <li><a href="#">One more Item</a></li>
    <li></li>
    <li><a href="#">Another Item</a></li>
    <li></li>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>

您可能需要调整上面规则中的实际CSS以适合您的外观和感觉，但作为一个概念，我认为拥有所有<li>元素并且然后智能地使用CSS更整洁更干净选择所有正确的。这也减少了class=" ... "的数量。

您还可以添加更多规则，以便例如您不在最后一个类型上执行分隔符CSS，因此最终的li永远不会是分隔符：

 ul li:nth-of-type(even), ul li :not(:last-of-type) {
    display: block;
    content: "*";
    vertical-align: middle;
    padding-top: 10px;
}

Answer 2

我不确定这是您之后的确切布局，但是您不能使用display: table和边框吗？

＆＃13;

  ul {
margin: 0;
padding: 0;
list-style: none;

display: table;
width: 100%;
  }

  li {
display: table-cell;
text-align: center;
  }

  li:not(:last-child) {
border-right: 1px solid #333;
  }

＆＃13;

<ul>
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  <li>Menu 5</li>
</ul>

＆＃13;

列表中的语义正确的分隔符（直接在HTML中，而不是CSS生成）

2 个答案: