Html 使我的跨类行、重置和提交按钮水平放置，而不是一个在另一个上面

大家好，我对HTML和CSS非常陌生，目前正在学校的一个小实验室工作。我试图让我的两个重置和提交按钮彼此水平，它们是一个在另一个之上。我不应该更改任何HTML，只要更改CSS代码即可。按钮位于底部的跨度元素中。我添加了表单代码以添加更多上下文

<form>
    <span class="row">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="Jaylen Carroll">
    </span>
    <span class="row">
        <label for="dob">Date of Birth</label>
        <input type="date" id="dob" name="dob">
    </span>
    <span class="row">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="jaylen@gmail.com">
    </span>
    <span class="row">
        <label for="city">City</label>
        <input type="city" id="city" name="city" placeholder="Ottawa">
    </span>
    <span class="row">
        <label for="province">Province</label>
        <select id="province" name="province">
            <option>Please Select..</option>
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NS">Nova Scotia</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="NT">Northwest Territories</option>
            <option value="NU">Nunavut</option>
            <option value="YT">Yukon</option>
        </select>
    </span>
    <span class="row">
        <input type="reset" id="reset" name="reset">
        <input type="submit" id="submit" name="submit">
    </span>
</form>

你可以用 这定义了一个flex容器；内联或块，取决于给定的值。它为其所有直接子级启用flex上下文

设置为列

这将建立主轴，从而定义flex项目放置在flex容器中的方向。Flexbox（除了可选包装外）是一个单向布局概念。可以将flex项目看作主要以水平行或垂直列的形式进行布局

.row{
显示器：flex；
弯曲方向：立柱；
}

名称
出生日期
电子邮件
城市
省
请选择。。
阿尔伯塔省
不列颠哥伦比亚省
马尼托巴省
新不伦瑞克省
纽芬兰和拉布拉多
新斯科舍省
安大略
爱德华王子岛
魁北克省
萨斯喀彻温省
西北地区
努纳武特
育空地区

您可以使用 这定义了一个flex容器；内联或块，取决于给定的值。它为其所有直接子级启用flex上下文

设置为列

这将建立主轴，从而定义flex项目放置在flex容器中的方向。Flexbox（除了可选包装外）是一个单向布局概念。可以将flex项目看作主要以水平行或垂直列的形式进行布局

.row{
显示器：flex；
弯曲方向：立柱；
}

名称
出生日期
电子邮件
城市
省
请选择。。
阿尔伯塔省
不列颠哥伦比亚省
马尼托巴省
新不伦瑞克省
纽芬兰和拉布拉多
新斯科舍省
安大略
爱德华王子岛
魁北克省
萨斯喀彻温省
西北地区
努纳武特
育空地区

默认情况下，HTML元素从单独的行开始。一种解决方案是将按钮放在一个带有div元素的组中，然后使用float-CSS属性将它们水平对齐

HTML

有关按钮组的更多信息，请参阅此w3学校链接：

---

默认情况下，HTML元素从单独的行开始。一种解决方案是将按钮放在一个带有div元素的组中，然后使用float-CSS属性将它们水平对齐

HTML

有关按钮组的更多信息，请参阅此w3学校链接：

---

对于包含两个按钮的最后一个类行，您可以替换其类名并将此CSS应用于它

。类名{
显示：“flex”，
//如果你想在两个按钮之间留点空间
调整内容：“间隔”
//如果没有，请不要在其中一个按钮上添加“调整内容”，而是在其中一个按钮上添加空白
//他们之间保持一点距离
}

---

因此，当您希望将元素分组为一行时，显示“flex”是您的朋友，因为最后一行包含两个按钮，您可以替换其类名并将此CSS应用于该行

。类名{
显示：“flex”，
//如果你想在两个按钮之间留点空间
调整内容：“间隔”
//如果没有，请不要在其中一个按钮上添加“调整内容”，而是在其中一个按钮上添加空白
//他们之间保持一点距离
}

---

因此，当您想将元素分组为一行时，display“flex”是您的朋友

这对我来说是可行的，但是，我只希望它影响两个按钮是水平的，当我处理样式表中的“.row”时，当我只需要更改提交和重置按钮时，它会影响HTML中的所有行。这对我来说是可行的，但是，我只希望它影响两个按钮是水平的，当我处理样式表中的“.row”时，当我只需要更改提交和重置按钮时，它影响HTML中的所有行。

h1{
text-align:center;
}
label{
margin-top: 16px;
font-weight: bold;
display: block;
text-align: center;
font-size: medium;
}
input{
text-align:center;
display: block;
margin: 15px;
width:150px;
}
form{
margin:0 auto;
width:215px;
}

<div class="button-group">
  <input type="reset" id="reset" name="reset">
   <input type="submit" id="submit" name="submit">
</div>

.button-group input {
    float: left;
    }