CSS 在一行显示两个表单按钮

在本文中，我们将介绍如何使用CSS将两个表单按钮在同一行进行显示。

阅读更多：CSS 教程

1. 使用`display: inline-block`属性

要在同一行显示两个表单按钮，我们可以使用CSS属性display: inline-block。该属性可以使元素以”内联块”的形式显示，即元素在一行显示，并且可以设置宽度和高度。

<style>
    .button-wrapper {
        display: inline-block;
    }

    .button {
        width: 100px;
        height: 30px;
        background-color: #3E82F7;
        color: #FFFFFF;
        border: none;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        margin-right: 10px;
    }
</style>

<div class="button-wrapper">
    <input type="button" class="button" value="按钮1">
    <input type="button" class="button" value="按钮2">
</div>

在上面的示例中，我们首先创建了一个CSS类.button-wrapper来包含两个表单按钮。接下来，我们为按钮定义了样式，包括宽度、高度、背景色、文本颜色等属性。我们还使用了display: inline-block属性来使按钮在同一行显示，并使用margin-right属性来设置按钮之间的间距。

2. 使用`float`属性

除了使用display: inline-block属性，还可以使用CSS的float属性来实现在同一行显示两个表单按钮。

<style>
    .button {
        width: 100px;
        height: 30px;
        background-color: #3E82F7;
        color: #FFFFFF;
        border: none;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        margin-right: 10px;
    }

    .clear {
        clear: both;
    }
</style>

<div>
    <input type="button" class="button" value="按钮1" style="float: left;">
    <input type="button" class="button" value="按钮2" style="float: left;">
    <div class="clear"></div>
</div>

在上面的示例中，我们给第一个按钮添加了float: left;属性，使其向左浮动，然后给第二个按钮添加相同的属性，使其也向左浮动。为了防止周围的元素受到浮动的影响，我们添加了一个空的div元素，并为其添加了.clear类。该类具有clear: both;属性，使其在两个浮动元素的下方显示。

3. 使用Flexbox布局

Flexbox是一种强大的CSS布局模式，可以轻松地在同一行显示多个元素。要在同一行显示两个表单按钮，我们可以使用Flexbox布局。

<style>
    .button-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
    }

    .button {
        width: 100px;
        height: 30px;
        background-color: #3E82F7;
        color: #FFFFFF;
        border: none;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
    }
</style>

<div class="button-wrapper">
    <input type="button" class="button" value="按钮1">
    <input type="button" class="button" value="按钮2">
</div>

在上面的示例中，我们创建了一个CSS类.button-wrapper来包含两个表单按钮。通过将display属性设置为flex，我们将.button-wrapper元素定义为Flex容器。然后，我们使用justify-content属性设置子元素在容器中的对齐方式，这里设为flex-start表示子元素在左侧对齐。使用align-items属性可以设置子元素在交叉轴上的对齐方式，这里设为center表示垂直居中对齐。最后，我们使用gap属性设置子元素之间的间距。