时间戳

首页 > 解决方案 > 在弹性列表项之间设置空格

html - 在弹性列表项之间设置空格

问题描述

我有一个导航，看起来有点像下面的这个，li里面的项目是flex项目。此菜单是从外部呈现的，我无法将任何项目包装在专用容器内。

我想要实现的是space-between在最后一项和左侧的其他项之间进行设置。我已经尝试对margin-left最后一个孩子使用 a ，但这不是最好的解决方案。

是否有一个 CSS 选项可以以某种方式“包装”最后一项，所以在那个和左边的之间总是有空格？

.container {
  max-width: 1000px;
  background-color: lightblue;
}

ul {
  display: flex;
  justify-content: space-between;
}

.last {
  background: red;
}
<div class="container">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li class="last">Last Item</li>
  </ul>
</div>

标签： htmlcssflexbox

解决方案

margin-left在最后一个元素上使用是一个很好的解决方案。但是，您可以使用选择器改进:last-child您的实现：

ul li:last-child {
  margin-left: 10px;
}

而不是手动将last班级分配给最后一个孩子。

编辑：如果你的意思是你希望你的最后一个孩子一直向右对齐。您可以将它们分成不同的列表，并使用justify-content: space-between：

.container {
  max-width: 1000px;
  background-color: lightblue;
  display: flex;
  justify-content: space-between;
}

ul {
  display: flex;
}

ul li {
  width: 3rem;
}

.right li {
  background-color: red;
}
<div class="container">
  <ul class="left">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <ul class="right">
    <li>Item</li>
  </ul>
</div>

推荐阅读