将flex容器的子按钮设置在右侧

如何解决将flex容器的子按钮设置在右侧

我试图将2个按钮并排调整到flex容器的右侧。我发现了使用margin-left auto的解决方案，因为float在flex容器中不起作用。左边距自动的问题是它在两个按钮之间提供了一个我不想要的空格。我需要两个按钮都浮动到容器的右侧，但仍然并排放置。有人可以帮忙吗？这是HTML

                <div className="task-list-item">
                  <ul>
                    <li className="li-title" key={key}>
                      {x.title}
                    </li>
                    <li className="li-desc" key={key}>
                      {x.description}
                    </li>
                  </ul>
                  <button className="task-btns">Complete</button>
                  <button className="task-btns">Delete</button>
                </div>
              

这是CSS

.task-list-item {
  list-style-type: none;
  background-color: rgb(204,200,200);
  width: 60%;
  display: flex;
  margin-bottom: 5px;
}

.task-btns {
  width: 100px;
  height: 25px;
  margin-left: auto;
}

这是容器的样子。

https://i.stack.imgur.com/ekMs9.png

解决方法

将按钮放入包装div并设置justify-content属性：

<style>
    .task-list-item {
        list-style-type: none;
        background-color: rgb(204,200,200);
        width: 60%;
        display: flex;
        margin-bottom: 5px;
        justify-content: space-between;
    }

    .task-btns {
        width: 100px;
        height: 25px;
    }
</style>

<div className="task-list-item">
    <ul>
        <li className="li-title" key={key}>
            {x.title}
        </li>
        <li className="li-desc" key={key}>
            {x.description}
        </li>
    </ul>
    <div>
        <button className="task-btns">Complete</button>
        <button className="task-btns">Delete</button>
    </div>
</div>

,

您可以将按钮添加到div标签中。然后删除margin-left：auto;从按钮中添加样式“显示：inline-flex;左边距：自动；”给你的div您的代码结果将是：

.task-list-item {
  list-style-type: none;
  background-color: rgb(204,200);
  width: 60%;
  display: flex;
  margin-bottom: 5px;
}

.btns {
    display: inline-flex;
    margin-left: auto;
}

.task-btns {
  width: 100px;
  height: 25px;
}

<div className="task-list-item">
  <ul>
    <li className="li-title" key={key}>
      {x.title}
    </li>
    <li className="li-desc" key={key}>
      {x.description}
    </li>
  </ul>
  <div className="btns">
    <button className="task-btns">Complete</button>
    <button className="task-btns">Delete</button>
  </div>
</div>

我希望这会有用。