Label к полю из двух частей
Вложений: 1
Привет!
Подскажите пожалуйста, как такую штуку сверстать (см. картинку). Надпись add над полем это ссылка, вложенная в span, к-рая вызвает скрипт. Нужно чтобы эта ссылка была с правой стороны поля. Все это вместе взятое вложено в блочный элемент, и если я делаю float: right; то span уезжает далеко вправо, в самый конец родительского элемента. Сейчас вопрос решил с помощью задания в пикселях margin-left для span, для каждого поля свое значение в зависимости от длины левого заголовка. Но это ненадежно, если нужно будет поменять ширину полям, или поменять шрифт в заголовке, все поедет. Как еще можно это сделать, более универсально? Спасибо. P.S. У меня появилась такая идея - сделать div обертку для обеих лейб и инпута, и задавать ширину не input полю, а обертке, а полю задавать ширину 100%. Таким образом, можно задать для span float: right; и он не уедет дальше правого края поля. Как по вашему, удачное решение? |
Цитата:
|
Как вариант...
<!doctype html>
<html>
<head>
<title></title>
<style>
.field {
float: left;
margin-bottom: 3px;
}
label {
position: relative;
display: block;
}
label > a {
position: absolute;
right: 0;
}
.end {
clear: left;
}
</style>
<script>
</script>
</head>
<body>
<form>
<div class='field'>
<label for="p1">Phone<a href='#'>Add</a></label>
<input type="text" id="p1" />
</div>
<div class='end'></div>
<div class='field'>
<label for="p2">Adres<a href='#'>Add</a></label>
<input type="text" id="p2" />
</div>
</form>
</body>
</html>
|
Цитата:
Спасибо за пример. Понял твою идею, сделать лейбэл блочным и к его правому краю цепляться. Но мне к сожалению это не подойдет, т.к. мне не нужно чтобы курсор в это поле прыгал. Но главное, что я понял, что можно и нужно все таки float:right использовать. Так что сэнкс :thanks: p.s. Вот бы еще кто-то ответил на мой вопрос про динамические поля, к-рые с библиотекой нужно подружить... :) |
Цитата:
|
Вариант со 100% шириной input не проканал, т.к. из-за своих паддингов у него в результате получается ширина чуть больше, и он вылазит за границы родительского дива. Поэтому я сделал так:
<!doctype html>
<html>
<head>
<title></title>
<style>
.field {
float: left;
margin-bottom: 3px;
}
.header {
position: relative;
}
a {
position: absolute;
right: 0;
}
input { width: 200px; }
</style>
<script>
</script>
</head>
<body>
<form>
<div class='field'>
<div class="header"><label for="p1">Phone</label><a href='#'>Add</a></div>
<input type="text" id="p1" />
</div>
<div style="clear:left"></div>
<div class='field'>
<div class="header"><label for="p2">Address</label><a href='#'>Add</a></div>
<div><input type="text" id="p2" /></div>
</div>
<div style="clear:left"></div>
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:34. |