Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2011, 22:07
Аспирант
Отправить личное сообщение для revvo Посмотреть профиль Найти все сообщения от revvo
 
Регистрация: 17.01.2011
Сообщений: 38

Label к полю из двух частей
Привет!

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

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

Спасибо.

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

Последний раз редактировалось revvo, 10.02.2011 в 23:49.
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2011, 09:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от revvo
удачное решение?
Вместо словесного описания лучше бы тестовый пример показал...
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2011, 09:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

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

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2011, 14:47
Аспирант
Отправить личное сообщение для revvo Посмотреть профиль Найти все сообщения от revvo
 
Регистрация: 17.01.2011
Сообщений: 38

Сообщение от ksa Посмотреть сообщение
Вместо словесного описания лучше бы тестовый пример показал...
Это у меня такая привычка, мне кажется что на словах вполне понятно, видимо это мне одному так кажется

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

p.s. Вот бы еще кто-то ответил на мой вопрос про динамические поля, к-рые с библиотекой нужно подружить...
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2011, 14:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от revvo
мне кажется что на словах вполне понятно
Пример как правило всё "объясняет лучше.
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2011, 15:50
Аспирант
Отправить личное сообщение для revvo Посмотреть профиль Найти все сообщения от revvo
 
Регистрация: 17.01.2011
Сообщений: 38

Вариант со 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
MySQl дата между двух дат mycoding Серверные языки и технологии 8 14.02.2011 15:23