如何对齐 div 中的 2 个按钮 - Html

在开发网页时，我们经常需要对齐页面中的元素。特别是在div中包含多个元素的情况下，如何对齐这些元素显得尤为重要，这篇介绍如何对齐div中的2个按钮。

1.使用CSS的display属性

我们可以使用CSS中的display属性来实现对齐。将按钮设置为"inline"或"inline-block"可以让它们水平对齐。

<div>
  <button style="display:inline;">Button 1</button>
  <button style="display:inline;">Button 2</button>
</div>

2.使用CSS的float属性

另一种方法是使用CSS的float属性。将一个按钮向左浮动，另一个按钮向右浮动，就可以实现对齐。

<div>
  <button style="float:left;">Button 1</button>
  <button style="float:right;">Button 2</button>
</div>

3.使用CSS的flexbox布局

CSS的flexbox布局是一种现代的布局方式，它可以轻松地实现元素的对齐。我们可以将按钮放在一个flex容器中，然后对容器进行对齐。

<div style="display:flex;">
  <button style="margin-right:auto;">Button 1</button>
  <button style="margin-left:auto;">Button 2</button>
</div>

总结

以上就是对齐div中2个按钮的3种方法，使用CSS的display属性、float属性或flexbox布局。你可以根据具体情况选择最合适的方法。如果你想进一步了解这些属性的使用，可以参考相关的文档和教程。