Search code examples
htmlcssalignmentinlinedisplay

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

I've already seen other posts on this but they haven't helped really, I know that the label is inline but whatever I tried won't work. I've tried making the label seem like an inline-block but that didn't work either for some reason. is there some other way to fix this besides changing the 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>

Solution

  • What you want:

    if you want all the elements, will be in a row,
    so not like display: inline but one under other.

    what to do:

    just add display: grid in your parent element, in this case <form>

    this automatically does for you, and is also responsive!

    more details:

    complete fixed code:

    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>