Выравнивание полей формы CSS

09.08.2015

Вариант №1

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

.block label { display: inline-block; width: 140px; text-align: right; }

Вариант №2

<div class="text"> 
    <label for="name">Name</label> 
    <input type="text" size="30" name="name" id="name"/> 
</div> 

<div class="text"> 
    <label for="email">E-mail</label> 
    <input type="text" size="25" name="email" id="email"/> 
</div> 

<div class="text"> 
    <label for="comment">Comment</label> 
    <textarea rows="5" cols="50" name="comment" id="comment"></textarea> 
</div>

div.text { 
  margin: 0; 
  padding: 0; 
  padding-bottom: 1.25em; 
} 

div.text label { 
  margin: 0; 
  padding: 0; 
  display: block; 
  font-size: 100%; 
  padding-top: .1em; 
  padding-right: .25em; 
  width: 6em; 
  text-align: right; 
  float: left; 
} 

div.text input, 
div.text textarea { 
  margin: 0; 
  padding: 0; 
  display: block; 
  font-size: 100%; 
} 

input:active, 
input:focus, 
input:hover, 
textarea:active, 
textarea:focus, 
textarea:hover { 
  background-color: lightyellow; 
  border-color: yellow; 
}