如何使用 flex 布局让按钮浮动在容器的右边？

让按钮浮动在父容器右边

已提供以下 HTML 代码：

<div class="container">
  <p>this is test para</p>  
  <button>按钮</button>
</div>

登录后复制

要让按钮浮动在容器的右边，而不是紧挨着

标签，可以使用 flex 布局。修改 CSS 代码如下：

.container {
  display: flex;
  justify-content: space-between;  
}

登录后复制

此代码将：

• 使用 flex 布局将子元素在水平方向。
• 使用 justify-content: space-between; 将元素分散到容器的两端，并将附加空间分配给两端之间的剩余空间。

通过这些修改，按钮将浮动在容器的右边，如图所示。

以上就是如何使用 flex 布局让按钮浮动在容器的右边？的详细内容，更多请关注GTHOST其它相关文章！