ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / input на всю доступную ширину а также про семантическую верстку
14 сообщений из 14, страница 1 из 1
input на всю доступную ширину а также про семантическую верстку
    #38410633
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
лирическое отступление по поводу семантически правильной верстки и html5: на дворе уже 2013 год а глянул на верстку поисковых строк яндекса и гугла - а там сплошные таблицы!!

имеем такую разметку:
Код: html
1.
2.
3.
4.
5.
<div>
	<input id="inp1" type="text"/>
	<button class="ui_button">X</button>
	<button class="ui_button">...</button>
</div>


необходимо чтобы input занимал всю доступную ширину
...
Рейтинг: 0 / 0
28.09.2013, 12:33
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410646
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spнеобходимо чтобы input занимал всю доступную ширину
Как вариант:
- ДИВу позишн релативе
- инпуту абсолюте и райт с нужным значением
...
Рейтинг: 0 / 0
28.09.2013, 13:14
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410654
Фотография Имя пользователя1
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Имя пользователя1
Участник
Может display:block для инпута?
...
Рейтинг: 0 / 0
28.09.2013, 13:33
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410656
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Имя пользователя1Может display:block для инпута?

размер инпута при этом не изменился, но кнопки переползли на следующую строчку)
...
Рейтинг: 0 / 0
28.09.2013, 13:40
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410657
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsaspнеобходимо чтобы input занимал всю доступную ширину
Как вариант:
- ДИВу позишн релативе
- инпуту абсолюте и райт с нужным значением


чот не помогло..
...
Рейтинг: 0 / 0
28.09.2013, 13:43
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410669
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
решил с помощью заворачивания всех элементов в div и спользования для контейнера display: table; а для дивов-оберток: display: table-cell;

Но возникла другая проблема - IE (в моем случае 10) добавляет 1px вокруг инпута - не могу понять как его ликвидировать!
...
Рейтинг: 0 / 0
28.09.2013, 14:26
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410672
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
и делает размеры инпута меньше по высоте (наверно и по ширине) по сравнению с другими элементами
...
Рейтинг: 0 / 0
28.09.2013, 14:29
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410736
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spчот не помогло..
Где твой вариант?
...
Рейтинг: 0 / 0
28.09.2013, 17:36
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410737
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sample</title>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style>
			.field {
				display: table;
				border: 0px solid gray;
				width: 100%;
			}
			.field div {
				display: table-cell;
				white-space: nowrap;
			}
			.ui_button {
				width: 30px;
			}
			.input {
				position: relative;
				width: 100%;
			}
			input {
				width: 100%;
			}
			.label {
				min-width: 150px;
				vertical-align: middle;
			}
			label {
				cursor: pointer;
				width: 100%;
			}
		</style>

	</head>
	<body>
		<div class="field">
			<div class="label">
				<label for="inp1">Текст:</label>
			</div>
			<div class="input">
				<input id="inp1" type="text"/>
			</div>
			<div>
				<button class="ui_button">X</button><button class="ui_button">...</button>
			</div>
		</div>
	</body>
</html>
...
Рейтинг: 0 / 0
28.09.2013, 17:41
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410779
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
Такой вариант подойдёт ?

Специфика этого варианта:
контейнеру "field" - присваиваем relative,
контейнеру "input" - absolute,
коннейнеру "ui_button" - float:right

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sample</title>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			* { margin:0; padding:0; }
			.field { position:relative; border:none; width:100%; min-width:220px; }
			.label { min-width:150px; vertical-align:middle; }
			label { cursor:pointer; width:100%; }
			.input { position:absolute; left:0; right:70px; }
			input { width:100%; }
			.ui_button { float:right; min-width:60px; }
			.ui_button button { display:block; float:left; width:30px; }
		</style>
	</head>
	<body>
		<div class="field">
			<div class="label">
				<label for="inp1">Текст:</label>
			</div>
			<div class="input">
				<input id="inp1" type="text"/>
			</div>
			<div class="ui_button">
				<button>X</button><button>...</button>
			</div>
		</div>
	</body>
</html>
...
Рейтинг: 0 / 0
28.09.2013, 19:49
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410876
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Что-то тегов у вас явно многовато...
Как вариант, по первому контенту.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
.container {
	overflow: hidden;
}
button {
	float: right;
	padding: 1px 3px 1px 3px;
}
.input {
	margin-right: 45px;
}
.input > input {
	width: 100%;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class='container'>
	<button class="ui_button">...</button>
	<button class="ui_button">X</button>
	<div class='input'>
		<input id="inp1" type="text" />
	</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
28.09.2013, 23:00
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410878
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Посмотрел сейчас свой вариант...
Опера - нормально (в ней и делал изначально)
ФФ - нужно больше сделать отступ
ИЕ - нормально
Хром нормально

В общем же случае советую у инпута:
- вообще убрать рамки
- рамки делать у его материнского дива

тогда инпут более "сговорчивый" по ширине 100%...
...
Рейтинг: 0 / 0
28.09.2013, 23:06
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410881
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spIE (в моем случае 10) добавляет 1px вокруг инпута - не могу понять как его ликвидировать!
Браузеры по-разному рисуют контролы... Не раз с этим сталкивался...
Решение рекомендуют стандартное - не использовать стандартные контролы.

Текстовые инпуты и текстареа заработают нормально если их лишить рамок и засунуть в обычные элементы (div или span)...
Далее делать рамки тем "простым" элементам.
...
Рейтинг: 0 / 0
28.09.2013, 23:10
| Ответить | Цитировать | Написать  
input на всю доступную ширину а также про семантическую верстку
    #38410907
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

огромное спасибо! есть над чем работать! :)
...
Рейтинг: 0 / 0
29.09.2013, 00:24
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / input на всю доступную ширину а также про семантическую верстку
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38410672&tid=1447838]:
 0ms
get settings:
 9ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 88ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 54ms
get tp. blocked users:
 2ms
others: 229ms
total:  425ms
созд. / загр.: 425ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]