标签和输入没有像我希望的那样对齐

Question

我已经看过关于此的其他帖子，但它们并没有真正帮助，我知道标签是内联的，但无论我尝试什么都行不通。我试过使标签看起来像一个内联块，但由于某种原因也没有用。除了更改 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>

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

标签和输入没有像我希望的那样对齐

label and input don't align like I want them to

html

css

alignment

inline

display