时间戳

首页 > 解决方案 > 使我的跨度类行，重置和提交按钮水平而不是一个在另一个之上

html - 使我的跨度类行，重置和提交按钮水平而不是一个在另一个之上

问题描述

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

<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>

当您将代码粘贴到 HTML 编辑器中时，结果如下： HTML 是如何产生的

我需要它如何： 在此处输入图像描述

我的 CSS 代码如下所示：

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;
}

标签： htmlcss

解决方案

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

将flex:direction设置为列。

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

.row{
display:flex;
flex-direction:column;
}
<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>

推荐阅读