Basically, I want all my fields to be aligned like in this first image, even if the label for the input is shorter. You can see that all the input boxes are aligned on the right hand side in the image you’re looking at. I don’t want to specify margins for each input as there will be 88 input fields by the end of this.
Desired UI:
How mine is appearing:
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
body {
background-color: white;
}
.locate__dropdown {
margin-top: 3em;
margin-left: 1em;
display: flex;
align-items: center;
gap: 0.7em;
font-weight: 700;
border-bottom: 1px solid black;
margin-bottom: 1em;
}
.locate__open {
margin-bottom: 5em;
margin-left: 1em;
}
#locateForm {
display: flex;
flex-direction: column;
justify-content: center;
}
input {
height: 2em;
width: 12em;
border: 1px solid gray;
border-radius: 6px;
margin-bottom: 5em;
}
<section id="locate">
<div class="locate__dropdown">
<img src="down-arrow.png" alt="">Locate
</div>
<div class="locate__open">
<form action="#" id="locateForm">
<label>
Locate Ticket #
<input type="text" name="ticketNum" id="ticketNum">
</label>
<label>Predecessor
<input type="text" name="predecessor" id="predecessor">
</label>
<label>
Ticket Status
<select id="ticketStatus" name="ticketStatus">
<option value=""></option>
<option value="correction">Correction</option>
<option value="original">Original</option>
<option value="relocate">Relocate</option>
<option value="update">Update</option>
</select>
</label>
</form>
</div>
</section>
2
Answers
This may be accomplished in a variety of ways. The "best" way to do this now would likely be to use CSS grids.
For more information see:
here you go.
You will have to update your HTML and CSS according to the snipped I created below.
Styles go directly on the
label
and on theinput
andselect
, so the amount of fields doesn’t bother at all. I made some more adjustments to the CSS maked with new or changedIn the HTML The label does not contain the form element, instead, it’s placed above the form element and references the ´id´ of the respective form element with the
for
attribute. So they are siblings now, not decendants.PS: there is no "best" way. If it’s resilient and works, it’s good. no matter if you use flexbox, grid or float.