| |
|
|
| | Как сделать, чтобы все элементы формы были выравнены.
Раньше делал таблицей: 1-ая колонка - название поля (например, Логин), 2-ая сам элемент (например, input), 3-ая колонка - список ошибок проверки данного элемента, если они есть.
Как "ровно" расположить элементы не используя таблицу? | |
| |
|
|
| |
|
|
| |
для: levsha
(17.01.2011 в 13:15)
| | | может как-то так:
<div>
<div style="width: 200px; float: left">название1<br> название2</div>
<div style="width: 200px; float: left">поле1 <br> поле2</div>
<div style="width: 200px; float: left">ошибка1<br> ошибка2</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: levsha
(17.01.2011 в 13:15)
| | | Многие гуру CSS используют семантическую верстку вида:
<ul>
<li>
<dl>
<dt>Логгин:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Логгин:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
</ul>
|
| |
| |
|
|
| |
|
|
| |
для: mihdan
(18.01.2011 в 12:17)
| | | а какой тогда css добавить чтобы они в один ряд были? | |
| |
|
|
| |
|
|
| |
для: levsha
(18.01.2011 в 14:54)
| | | ?? | |
| |
|
|
| |
|
|
| |
для: levsha
(18.01.2011 в 14:54)
| | | ??
присоединяюсь | |
| |
|
|
| |
|
|
| |
для: levsha
(18.01.2011 в 14:54)
| | |
<style>
ul{list-style-type:none; margin:0; padding:0;}
ul li dd{margin:0;}
</style>
<ul>
<li>
<dl>
<dt>Логин:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Логин:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
</ul>
|
| |
| |
|
|
| |
|
|
| |
для: ONYX
(20.01.2011 в 10:12)
| | | и где же тут колонки? | |
| |
|
|
| |
|
|
| |
для: Igorek
(20.01.2011 в 10:24)
| | | Самое главное забыл указать
| |
| |
|
|
| |
 2.9 Кб |
|
| |
для: ONYX
(20.01.2011 в 10:39)
| | | с таким дополнение в ИЕ сдвиг происходит (см. скрин)
если вот так:
<style>
ul{list-style-type:none; margin:0; padding:0;}
ul li{float:left; margin:0; padding: 0}
ul li dl {margin:0; padding: 0}
ul li dd{margin:0; padding: 0}
</style>
<ul>
<li>
<dl>
<dt>Логин:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Логин:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
</ul>
|
то норм, правда исходной задачи это не решает. | |
| |
|
|
| |
|
|
| |
для: levsha
(18.01.2011 в 14:54)
| | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
ul, li, dl, dt, dd {padding: 0; margin: 0; list-style: none;}
dt {float: left; font-weight: bold; width: 80px;}
li {float: left; width: 100%; margin-bottom: 10px; line-height: 20px;}
</style>
</head>
<body>
<ul>
<li>
<dl>
<dt>Логин:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Пароль:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
<li>
<dl>
<dt>Пароль:</dt>
<dd><input type="text" /></dd>
</dl>
</li>
</ul>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: levsha
(17.01.2011 в 13:15)
| | | немного погуглив в инете нашел:
<style>
form dt{
padding: 0;
margin: 0.7em 1em 0.5em 0;
float: left;
clear: left;
width: 100px;
text-align: right;
}
form dd{
margin: 0;
padding: 0.5em 0;
float: left;
*float: none; /* hack for IE 6-7 - better to keep in separate file */
}
.error {
color: red;
margin-left: 30px;
}
</style>
<form>
<dl>
<dt>Логин:</dt>
<dd>
<input type="text" />
<span class="error">Не правильный логин</span>
</dd>
<dt>Пассворд:</dt>
<dd>
<input type="password" />
<span class="error">Не правильный пароль</span>
</dd>
</dl>
</form>
|
| |
| |
|
|
