输入的形式定位

Question

我是 CSS 的新手，需要复制一个模型作为练习。我在设置表单时遇到问题，因为我希望标签位于输入上方并位于同一矩形中。随时提供有关不重复代码的最佳做法的提示或其他内容提前致谢。

Expected:

My result:

我的HTML代码：

<form method="post">
        <div class="form-nome">
            <label for="nome">Nome do Paciente</label>
            <input type="text" name="nome" id="nome" placeholder="ex: Thiago Martins Prado">
        </div>
        <div class="form-data">
            <label for="data">Data da Consulta</label>
            <input type="date" name="data" id="data">
        </div>
        <div class="form-peso">
            <label for="peso">Peso (kg)</label>
            <input type="number" name="peso" id="peso" step="0.1" placeholder="ex: 70.6">
        </div>
        <div class="form-altura">
            <label for="altura">Altura (m)</label>
            <input type="number" name="altura" id="altura" step="0.1" placeholder="ex: 1.83">
        </div>
        <div class="form-botao">
            <button type="submit" class="submit">Confirmar</button>
            <button type="reset" class="reset">Limpar</button>
        </div>
    </form>

我的CSS代码：

form {
    margin: 0 40px;
}

label {
    font: 18px 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

input {
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

input#nome {
    display: grid;
    width: 100%;
}

input#data {
    display: block;
}

input#peso {
    display: block;
}

input#altura {
    display: block;
}

::placeholder {
    color: #ADB5B8;
}

Answer 1

为此使用 flex-box，以获取有关 flex-box read here 的更多信息。这是您的示例代码

form {
    margin: 0 40px;
}

label {
    font: 18px 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

input {
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

input#nome {
    display: grid;
    width: 100%;
}

input#data {
    display: block;
}

input#peso {
    display: block;
}

input#altura {
    display: block;
}

::placeholder {
    color: #ADB5B8;
}

.flex-container{
  display:flex;
  justify-content: space-between;
  align-items:center;
}

<form method="post">
        <div class="form-nome">
            <label for="nome">Nome do Paciente</label>
            <input type="text" name="nome" id="nome" placeholder="ex: Thiago Martins Prado">
        </div>
        <div class="flex-container">
          <div class="form-data">
            <label for="data">Data da Consulta</label>
            <input type="date" name="data" id="data">
        </div>
        <div class="form-peso">
            <label for="peso">Peso (kg)</label>
            <input type="number" name="peso" id="peso" step="0.1" placeholder="ex: 70.6">
        </div>
        <div class="form-altura">
            <label for="altura">Altura (m)</label>
            <input type="number" name="altura" id="altura" step="0.1" placeholder="ex: 1.83">
        </div>
        <div class="form-botao">
            <button type="submit" class="submit">Confirmar</button>
            <button type="reset" class="reset">Limpar</button>
        </div>
    </form>

输入的形式定位

Input's forms positioning

html

css

forms