Форум

revvo · #1 (**permalink**) 10.02.2011, 22:07

Привет!

Подскажите пожалуйста, как такую штуку сверстать (см. картинку). Надпись add над полем это ссылка, вложенная в span, к-рая вызвает скрипт. Нужно чтобы эта ссылка была с правой стороны поля. Все это вместе взятое вложено в блочный элемент, и если я делаю float: right; то span уезжает далеко вправо, в самый конец родительского элемента.

Сейчас вопрос решил с помощью задания в пикселях margin-left для span, для каждого поля свое значение в зависимости от длины левого заголовка. Но это ненадежно, если нужно будет поменять ширину полям, или поменять шрифт в заголовке, все поедет. Как еще можно это сделать, более универсально?

Спасибо.

P.S. У меня появилась такая идея - сделать div обертку для обеих лейб и инпута, и задавать ширину не input полю, а обертке, а полю задавать ширину 100%. Таким образом, можно задать для span float: right; и он не уедет дальше правого края поля. Как по вашему, удачное решение?

ksa · #2 (**permalink**) 11.02.2011, 09:14

Сообщение от revvo

удачное решение?

Вместо словесного описания лучше бы тестовый пример показал...

ksa · #3 (**permalink**) 11.02.2011, 09:44

Как вариант...

<!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>

revvo · #4 (**permalink**) 11.02.2011, 14:47

Сообщение от ksa

Вместо словесного описания лучше бы тестовый пример показал...

Это у меня такая привычка, мне кажется что на словах вполне понятно, видимо это мне одному так кажется

Спасибо за пример. Понял твою идею, сделать лейбэл блочным и к его правому краю цепляться. Но мне к сожалению это не подойдет, т.к. мне не нужно чтобы курсор в это поле прыгал. Но главное, что я понял, что можно и нужно все таки float:right использовать. Так что сэнкс

p.s. Вот бы еще кто-то ответил на мой вопрос про динамические поля, к-рые с библиотекой нужно подружить...

ksa · #5 (**permalink**) 11.02.2011, 14:50

Сообщение от revvo

мне кажется что на словах вполне понятно

Пример как правило всё "объясняет лучше.

revvo · #6 (**permalink**) 11.02.2011, 15:50

Вариант со 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>

Форум

Справочник

Discord чат

Курсы javascript