label and input don't align like I want them to [closed]
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:[email protected]" 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 1:
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:
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
complete fixed code:
form {
display: grid;
}<form action="mailto:[email protected]" 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>