Reputation: 3539
Suppose I have a form:
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
With the following CSS:
form {
width: 400px;
}
p {
display: flex;
}
label {
margin-right: 10px;
}
input {
flex-grow: 1;
}
It looks the following way:
I need to align the right side of inputs, based on the widest label. That's what I want:
I don't know label's width beforehand, so bootstrap-like solutions with columns are not good here. Is there pure HTML/CSS way to achieve it, without using JS?
PS!!: And I don't want to use table
Upvotes: 1
Views: 101
Reputation: 274384
Remove the p
and use CSS grid:
form {
width: 400px;
display:grid;
grid-template-columns:auto 1fr;
grid-gap:5px;
margin:10px;
}
input {
width:100%;
}
<form action="#">
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</form>
<form action="#" style="width:600px;">
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</form>
Or use display:contents
with the p
form {
width: 400px;
display:grid;
grid-template-columns:auto 1fr;
grid-gap:5px;
margin:10px;
}
input {
width:100%;
}
p {
display:contents;
}
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
<form action="#" style="width:600px;">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
Upvotes: 2
Reputation: 435
You could simply organise it into a table. This will give you the formatting that you want.
Edit: Since you have specified that you don't want to use a table (and it would be better to avoid having to reorganise your html), how about styling your elements as if they were a table? I've changed my answer to keep your original html intact.
form {
display:table;
}
p {
display:table-row;
}
label, input {
display: table-cell;
}
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
Upvotes: 1
Reputation: 825
Here is the working example:
form {
width: 400px;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.form-group label {
margin-right: 10px;
flex: 1;
}
.form-group input {
min-width: 180px;
}
<form action="#">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</div>
<div class="form-group">
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</div>
<div class="form-group">
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</div>
</form>
Upvotes: 0
Reputation: 31
You should put the flex-grow on the label :) :
form {
width: 400px;
}
p {
display: flex;
}
label {
flex: 1;
margin-right: 10px;
white-space: nowrap;
}
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
Upvotes: 1
Reputation: 2907
The best way to do so is, creating a table with two columns.
<table>
<tr>
<td>label</td>
<td>input</td>
</tr>
<tr>
<td>label</td>
<td>input</td>
</tr>
</table>
Upvotes: 0