标签和输入不像我希望的那样对齐[关闭]答案

【问题标题】：label and input don't align like I want them to [closed]标签和输入不像我希望的那样对齐[关闭]
【发布时间】：2022-01-13 02:16:39
【问题描述】：

我已经看过其他帖子，但它们并没有真正帮助，我知道标签是内联的，但无论我尝试什么都行不通。我试过让标签看起来像一个内联块，但由于某种原因这也不起作用。除了更改 HTML 之外，还有其他方法可以解决此问题吗？

label {
  width: 100px;
  padding: 2px;
  text-align: right;
}

input {
  width: 300px;
  padding: 2px;
}

<!DOCTYPE HTML>
<html lang="nl">

<head>
  <meta charset="utf-8">
  <title>oefening2</title>
  <!-- voeg hier de link naar de css file toe-->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- maak hier het formulier-->
  <form action="mailto:12100834@student.pxl.be" method="post" enctype="text/plain">
    <label for="id">Identificatie:</label>
    <input type="text" id="id">
    <br>

    <label for="score">Score:</label>
    <input type="text" id="score">
    <br>

    <label for="tijdstip">Tijdstip:</label>
    <input type="radio" id="vm">
    <label for="vm">VM</label>

    <input type="radio" id="nm">
    <label for="nm">NM</label>
    <br>

    <label for="opmerking">Opmerking:</label>
    <textarea name="opmerking" id="opmerking" cols="30" rows="5"></textarea>
    <br>

    <input type="submit" value="Verzenden">
  </form>
</body>

</html>

【问题讨论】：

那么您是否希望输入不在左侧，而是在标签下方？因为是的，在小屏幕上工作但更大的不是（我所看到的）PLS回答所以我可以回答
“就像你想要的那样”是问题中对预期结果最具描述性的部分。请详细说明您想要实现的目标。
@カメロン “就像我希望他们那样”在这种情况下意味着我在我的 css 中作为我的风格，这对我来说听起来合乎逻辑，没有人质疑我。
@LaaouatniAnas 我想将我的文本向右对齐，以便输入在彼此下方对齐

标签： html css alignment inline display

【解决方案1】：

你想要什么：

如果你想要所有元素，将在一行中，
所以不像display: inline，而是一个在另一个之下。

做什么：

只需在您的父元素中添加display: grid，在本例中为<form>

这会自动为您服务，并且是响应式的！

更多详情：

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

完整的固定代码：

form {
  display: grid;
}

<form action="mailto:12100834@student.pxl.be" method="post" enctype="text/plain">
  <!-- 1 -->
  <label for="id">Identificatie:</label>
  <input type="text" id="id">


  <!-- 2 -->
  <label for="score">Score:</label>
  <input type="text" id="score">


  <!-- 3 -->
  <label for="tijdstip">Tijdstip:</label>
  <input type="radio" id="vm">
  <label for="vm">VM</label>


  <!-- 4 -->
  <input type="radio" id="nm">
  <label for="nm">NM</label>


  <!-- 5 -->
  <label for="opmerking">Opmerking:</label>
  <textarea name="opmerking" id="opmerking" cols="30" rows="5"></textarea>

  <!-- 6 -->
  <input type="submit" value="Verzenden">
</form>

【讨论】：