I’ve tried everything including similar questions/answers to solve this problem but can’t get it to come together.
I’m using Flexbox rows and columns and what I am trying to do is to create four rows of input fields with four items in each (just the final one has two for now) and then to align those such that the labels that go with the input fields align vertically with the row underneath them.
At the moment I can’t get them to straighten up so it’s very uneven.
So, for example, labels ‘Size Meaning:’, ‘Class;’, and ‘Unit:’ should all be vertically aligned and starting in the same place.
How so I align the labels in the columns vertically?
This is an image of how this looks right now:
p { font-size: 24px; }
li { font-size: 24px; }
.page-wrapper {
margin: 80px;
align-content: flex-start;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.li-label, .li-input {
display: inline-block;
}
.li-label {
min-width: 80px;
}<div class='page-wrapper'>
<div class='row'>
<div class='column'>
<form>
<label for="name"> Name:</label>
<input type="name" id="name" name="name">
</form>
</div>
<div class='column'>
<form>
<label for="value">Value:</label>
<input type="value" id="size_value" name="value">
</form>
</div>
<div class='column'>
<form>
<label for="size">Size:</label>
<input type="size" id="size" name="size">
</form>
</div>
<div class='column'>
<form>
<label for="price">Price:</label>
<input type="price" id="price_at_size" name="price">
</form>
</div>
</div>
<!-------------------END ROW 1----------------------------------------->
<!-- <div class='page-wrapper'> -->
<div class='row'>
<div class='column'>
<form>
<label for="currency">Currency:</label>
<input type="currency" id="currency" name="currency">
</form>
</div>
<div class='column'>
<form>
<label for="year">Year:</label>
<input type="year" id="series_name" name="year">
</form>
</div>
<div class='column'>
<form>
<label for="class">Class:</label>
<input type="class" id="class" name="class">
</form>
</div>
<div class='column'>
<form>
<label for="usd">USD:</label>
<input type="usd" id="usd" name="usd">
</form>
</div>
<!-- </div> -->
<!-------------------END ROW 2----------------------------------------->
<!-- <div class='page-wrapper'> -->
<div class='row'>
<div class='column'>
<form>
<label for="style">Style:</label>
<input type="style" id="style" name="style">
</form>
</div>
<div class='column'>
<form>
<label for="result">Result:</label>
<input type="result" id="result" name="result">
</form>
</div>
<div class='column'>
<form>
<label for="unit">Unit:</label>
<input type="unit" id="unit" name="unit">
</form>
</div>
<div class='column'>
<form>
<label for="Result1">Result1:</label>
<input type="Result1" id="Result1" name="Result1">
</form>
</div>
</div>
<!-------------------END ROW 3----------------------------------------->
<!-- <div class='text-align:center'>
<div class='row'>
<div class='column'>
<form>
<label for="level">Level:</label>
<input type="level" id="level" name="level">
</form>
</div>
<div class='column'>
<form>
<label for="reference">Reference:</label>
<input type="reference" id="reference" name="reference">
</form>
</div>
</div>
</div> -->
<!--
<div style="text-align:center"></div>
<form>
<label for="sources">Sources:</label>
<input type="sources" id="sources" name="sources">
<label for="notes">Notes:</label>
<input type="notes" id="notes" name="notes">
</form>
</div>
<!-------------------END ROW 4---------------------------------------->
<br>
<div style="text-align: center">
<input type="submit" id="submit" name="submit">
</div>
2
Answers
Isn’t what you want placing each element to it’s own column class like this? Also you need to wrap all the elements in only one form:
there are lot of work need to be done in HTML part.
But i have just ignored it and added missing closing div in snippet.
you can change the values of width as per your need for form elements.