Jump to content

vertical align label with input


ibnclaudius

Recommended Posts

I want to vertical align the label with the input no matter the label size.

 

Here's my code and what it output:

 

<div class="form-item">
	<div class="form-label strong left">Nome:</div>
	<div class="form-input-wrapper left">
		<input class="form-input" type="text">
	</div>
</div>
<div class="form-item">
	<div class="form-label strong left">Email:</div>
	<div class="form-input-wrapper left">
		<input class="form-input" type="text">
	</div>
</div>
<div class="form-item">
	<div class="form-label strong left">Email novamenteEEEEEEEEEEEEEE:</div>
	<div class="form-input-wrapper left">
		<input class="form-input" type="text">
	</div>
</div>

 

.form-item
{
border-bottom:1px solid #eee;
overflow:hidden;
padding:15px 20px
}

.form-label
{
color:#666;
position:absolute;
text-align:right;
width:100px;
}

.form-input
{
display:block;
width:232px;
}

 

labelinput.png

Link to comment
https://forums.phpfreaks.com/topic/259305-vertical-align-label-with-input/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.