水平放置 2 个按钮答案

【问题标题】：Place 2 Buttons horizontally水平放置 2 个按钮
【发布时间】：2016-04-05 21:32:57
【问题描述】：

我想知道如何水平放置 2 个按钮并在它们之间留出空间。

任何简单的 html 和 css 代码 sn-p 有人可以分享吗？

我找不到任何好的例子

【问题讨论】：

标签： html css

【解决方案1】：

有多种方法，这里有一个非常简单的浮动示例：

<button class="button-1">Example</button>
<button class="button-2">Example 2</button>

button{
  float: left;
}

.button-2{
  margin-left: 15px;
}

我强烈建议你去 w3school CSS 教程，它会教给你很多很棒的东西。

注意：如果使用按钮，您甚至不必浮动它们，默认情况下它们会彼此相邻。但是对于像 div 这样的元素，你需要浮动。

【讨论】：

【解决方案2】：

取决于您试图通过页面的其余部分实现什么，包括布局以及您希望将什么样式应用于其他按钮和其他 HTML 控件。

HTML：

<button>Button 1</button>
<button>Button 2</button>

CSS：

button {
    margin-left:20px;
}

上面的 HTML/CSS 将在每个按钮的左侧放置 20 像素的边距。如果您只是需要将其应用于一个按钮，那么您将需要一个单独的类或一些内联样式来执行此操作。

例如

CSS：

.buttonSpaced {
    margin-left:20px;
}

然后只将此样式应用于第二个按钮。

HTML：

<button class="buttonSpaced">Button 2</button>

或者你可以直接内联，如果它不太可能再次使用......

<button style="margin-left:20px;">Button 2</button>

【讨论】：