在弹性列表项之间设置空格[重复]

Posted 2023-03-05

【中文标题】在弹性列表项之间设置空格[重复]

【英文标题】：Set space-between between flex list items [duplicate]

【发布时间】：2021-01-27 17:09:50

【问题描述】：

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

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

是否有一个 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>

【问题讨论】：

你为什么称margin-left解决方案为“不是最好的”？这是一个很好的做法，经常用于此类任务。

保证金解决方案不错：medium.com/@iamryanyu/…

是的，我知道，但是由于不同显示器尺寸的屏幕宽度会有所不同 - 有边距我不能让它一直粘在左边

你需要 margin-left:auto 在最后一个孩子上（不需要额外的包装）

【参考方案1】：

在最后一个元素上使用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>