Как стилизовать наборы меток и полей в форме с помощью чистого CSS и получить правильное выравнивание? - PullRequest
Новая
       5

Как стилизовать наборы меток и полей в форме с помощью чистого CSS и получить правильное выравнивание?

1 голос
/ 31 октября 2010

Я прошу в качестве последней попытки выполнить мою совесть и сделать это с помощью CSS.Я хочу создать эту простую форму с помощью CSS, но я потратил два часа, пытаясь ее получить, и всегда сталкивался с проблемами выравнивания.Я сделал это за десять минут, используя таблицы.

Мне нужно, чтобы метки были выровнены по правому краю, строка с именем разделена на две части, метки должны быть выровнены по вертикали относительно входного текста и все правые края входных данных выровнены.Что нужно сделать, чтобы сделать это в CSS?

alt text

РЕДАКТИРОВАТЬ: Добавление моего CSS, чтобы увидеть, где я иду не так.

Вот что я получил с помощью CSS: 

.form_row {
    width: 500px;
}
.form_row label {
    text-align: right;
    width: 150px;
    float: left;
    margin-top: 6px;
    padding-right: 6px;
}
#id_first_name, #id_last_name {
    width: 130px;
}
#id_email, #id_password {
    width: 300px;
}

Разметка: 

<div class="form_row">
    <label for="id_first_name">Name:</label>
    <input id="id_first_name" type="text" name="first_name" />
    <input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
    <label for="id_email">Email:</label>
    <input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
    <label for="id_password">Password:</label>
    <input id="id_password" type="password" name="password" />
</div>

И результат:

alt text

Ответы [ 2 ]

5 голосов
/ 31 октября 2010

Ты соблазнил меня принять вызов :) Я вот-вот сделал это за 10 минут, используя CSS.

Пока вы в порядке с настройкой line-height и настройками размеров в пикселях для некоторых элементов, я думаю, что это достижимо.

Следует также отметить, как font-size, padding и line-height влияют на текстовые поля и их размеры.

Посмотрите на это: http://jsbin.com/osibu3/4

Протестировано в IE6 +, FF3.6 +, Chrome, Safari

Также для справки: 

<!doctype html>
<html>
<head>
  <title></title>
  <style type="text/css">
    html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
    body { font:normal 62.5% lucida grande, lucida sans unicode }
    #my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
    #my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
    #my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
    input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
      border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
    .text.long { width:395px }
    .text.short { width:193px }
  </style>
</head>
<body>
  <form action="" id="my-form">
    <fieldset class="name">
      <label for="first"><strong>Name:</strong></label>
      <input type="text" name="first" value="first" class="text short"/>
      <input type="text"  name="last" value="last" class="text short"/>
    </fieldset>
    <fieldset>
      <label for="email"><strong>Email:</strong></label>
      <input type="text" name="email" class="text long"/>
    </fieldset>
    <fieldset>
      <label for="password"><strong>Password:</strong></label>
      <input type="text" name="password" class="text long"/>
    </fieldset>
  </form>
</body>
</html>
0 голосов
/ 31 октября 2010

http://www.blueprintcss.org/

Структура Blueprint CSS поможет вам с табличной версткой с помощью divs. Он прост в использовании и имеет хорошую документацию.

Трудно дать другой ответ с таким небольшим количеством информации в вашем вопросе.

...