ширина Input внутри div

jetli13 · September 23, 2010

Добрый день подскажите как мне "уложить" input в div так чтоб не появилась полоса прокрутки у внешнего контейнера


<div style="width: 100px; overflow: auto;">
  <div style="padding:2px; width:100%; background-color:red;">
    <input type="text" style="width:100%" />
  </div>
</div>

в данном случае мешает border у input который не берется в расчет при ширине в 100%

Доктайп <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Спасибо!

Edited September 23, 2010 by jetli13

stars · September 23, 2010

Убрать padding

Вы сами задумайтесь, ведь логика проста у вас input берет 100% ширены, а вы пытаетесь его еще отодвинуть...уберите padding, сделайте input 95% и задайте ему margin: 2px auto;

Great Rash · September 23, 2010

.input_wrapper {
	border: #69c 1px solid; /* цвет бордера инпута */
	background: red; /* цвет фона инпута */
}

.input_wrapper input {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

<div class="input_wrapper">
	<input type="text" name="input" id="input" value="" />
</div>

jetli13 · September 23, 2010

видимо я привел неудачный пример, давайте рассмотрим такой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<style type="text/css">
*
{ 
  margin: 0px;
  padding: 0px;
}
</style>
</head>
<body>
    <table style="width:50%;">
    <tr>
      <td><input style="width:100%;"></td>
    </tr>
    </table>
</body>
</html>

если пройтись файер багом по ниму, то точно видно что инпут вылезает за границы ячейки,

но если посмотреть на инпут на морде яндекса то видно что он вровень. При этом ни каких 95% ширины. Только вот не могу понять почему (

.input_wrapper {
	border: #69c 1px solid; /* цвет бордера инпута */
	background: red; /* цвет фона инпута */
}

.input_wrapper input {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

<div class="input_wrapper">
	<input type="text" name="input" id="input" value="" />
</div>

спасибо! Сейчас такой вариант и юзаю, ищу альтернативы

rus · September 23, 2010

jetli13 странно, в первом посте вы спрашиваете за див, в последнем уже в примере таблица идет.

jetli13 · September 23, 2010

jetli13 странно, в первом посте вы спрашиваете за див, в последнем уже в примере таблица идет.

Ну в принципе для меня это не критично. Просто проблема скорее в инпуте ...

Если я запутал разными примерами, то извиняюсь, пусть лучше вопрос относится ко второму примеру.

Great Rash · September 23, 2010

спасибо! Сейчас такой вариант и юзаю, ищу альтернативы

Альтернатив нет. Чем не устраивает это решение? Дополнительным элементом? Без него задолбаетесь с кроссбраузерностью.

jetli13 · September 23, 2010

Альтернатив нет. Чем не устраивает это решение? Дополнительным элементом? Без него задолбаетесь с кроссбраузерностью.

НЕ ВЕРЮ )))

Но допустим )

Так же таки сделать это для ячейки таблицы аля яндекс вариант

Great Rash · September 23, 2010

Ну ИЕ по моему "нормально" считает ширину инпута (т.е. на самом деле неправильно, но так как надо пользователю )

Для Safari и Chrome стоит мега свойство -webkit-box-sizing: border-box; которое делает всю магию

Для Мозиллы не понял как они в яндексе этого добились, может скрипты?

Тем более что там jQuery юзается... (т.к. у них код формирует шаблонизатор сложно что-то разобрать - для каждого браузера код свой).

jetli13 · September 23, 2010

Ну ИЕ по моему "нормально" считает ширину инпута (т.е. на самом деле неправильно, но так как надо пользователю )
Для Safari и Chrome стоит мега свойство -webkit-box-sizing: border-box; которое делает всю магию
Для Мозиллы не понял как они в яндексе этого добились, может скрипты?
Тем более что там jQuery юзается... (т.к. у них код формирует шаблонизатор сложно что-то разобрать - для каждого браузера код свой).

>т.е. на самом деле неправильно, но так как надо пользователю

Про Ie эт точно! (даст Бог ему быстрой смерти)

>может скрипты?

не, не скрипты, тогда бы были инлайн стили прописаны

Great Rash · September 23, 2010

Может доктайп тогда... я то на strict проверяю, а у них transitional, плюс настораживает класс quirks на <html>.

rash · September 23, 2010

если пройтись файер багом по ниму, то точно видно что инпут вылезает за границы ячейки,
но если посмотреть на инпут на морде яндекса то видно что он вровень. При этом ни каких 95% ширины. Только вот не могу понять почему (

box-sizing: border-box;

для IE компенсируется маргином — там заведомо известна шинира полей и отступов в полях ввода (6px суммарно), но это для стандартного режима.

Ну и квиркс, не стоит забывать.

psywalker · September 23, 2010

<!DOCTYPE HTML>

	<title>Input width</title>
	<style>
		body {
			background: #fff;
			}
		input {
		   -webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		   -ms-box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
			}
		.width-wrapper {
			width: 50%;
			}
	</style>

	<!--[if lt IE 8]>
	<style>
		.input-wrapper {
			padding-right: 6px;
			}
	</style>
	<![endif]-->

<div class="width-wrapper">
	<div class="input-wrapper">
		<input>
	</div>

</div>

<div style="width: 50%; height: 1.2em; background: #f99;"></div>

Sign In

ширина Input внутри div

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information