Vue2 中将按钮移动到右边的简单方法

<div class='container'>
  <div>这是左边的内容</div>
  <button>按钮</button>
</div>
<style>
.container {
  display: flex;
  justify-content: space-between;
}
button {
  margin-left: auto;
}
</style>
<h2>Vue2 中将按钮移动到右边的简单方法</h2>
<p>使用 Flex 布局可以轻松将 Vue2 中的按钮移动到右边。只需添加几行 CSS 代码即可实现。</p>
<p><strong>步骤：</strong></p>
<ol>
<li>在父元素上添加以下 CSS 样式：</li>
</ol>
<pre><code class="language-css">display: flex;
justify-content: space-between;
</code></pre>
<p>这将使子元素在主轴上均匀分布，并且最后一个子元素将被推到右边。</p>
<ol start="2">
<li>在最后一个子元素（即按钮）上添加以下 CSS 样式：</li>
</ol>
<pre><code class="language-css">margin-left: auto;
</code></pre>
<p>这将使按钮向右对齐，占据剩余的空间。</p>
<p><strong>示例代码：</strong></p>
<pre><code class="language-html">&lt;div class='container'&gt;
  &lt;div&gt;这是左边的内容&lt;/div&gt;
  &lt;button&gt;按钮&lt;/button&gt;
&lt;/div&gt;

&lt;style&gt;
.container {
  display: flex;
  justify-content: space-between;
}
button {
  margin-left: auto;
}
&lt;/style&gt;
</code></pre>
<p>通过以上简单的步骤，你就可以轻松地将 Vue2 中的按钮移动到右边。</p>