Введите текстовое поле с автоматической шириной [дубликат]
Интересно, что ни один из ответов на этой странице не упоминает два крайних случая, надеюсь, никто не возражает, если я их добавлю:
Случай с краем # 1: одновременный доступ к Словарю
Родовые словари в .NET не являются потокобезопасными, а иногда могут бросать NullReference или даже (чаще) a KeyNotFoundException при попытке получить доступ к ключу из двух параллельных потоков. Исключение в этом случае является довольно ошибочным.
Случай с краем # 2: небезопасный код
Если код NullReferenceException задан кодом unsafe, вы можете посмотреть на переменные указателя , и проверьте их на IntPtr.Zero или что-то в этом роде. Это одно и то же («исключение нулевого указателя»), но в небезопасном коде переменные часто переводятся в типы значений / массивы и т. Д., И вы ударяете головой о стену, задаваясь вопросом, как тип значения может исключение.
(Еще одна причина для небезопасного использования небезопасного кода, если вам это нужно)
6 ответов
Ширина <input> создается из его атрибута size.
Вы можете попробовать width:100%, как показано в моем примере ниже.
Не заполняет ширину:
<form action='' method='post' style='width:200px;background:khaki'>
<input style='width:auto' />
</form>
Заполняет ширину:
<form action='' method='post' style='width:200px;background:khaki'>
<input style='width:100%' />
</form>
Меньший размер, меньшая ширина:
<form action='' method='post' style='width:200px;background:khaki'>
<input size='5' />
</form>
UPDATE
Вот лучшее, что я мог сделать после несколько минут. Это 1px выключено в FF, Chrome и Safari и идеально подходит для IE. (Проблема в том, что # ^ & amp; * IE применяет границы по-другому, чем все остальные, поэтому он несовместим.)
<div style='padding:30px;width:200px;background:red'>
<form action='' method='post' style='width:200px;background:blue;padding:3px'>
<input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
<br /><br />
<input size='' style='width:100%' />
</form>
</div>
-
1– richb 7 January 2011 в 03:56
-
2– Ben 7 January 2011 в 03:58
-
3– richb 7 January 2011 в 04:45
-
4– Stephen Sprinkle 27 July 2012 в 02:11
-
5– nicholas 6 May 2013 в 06:51
Ответ 1 - «ответ» дал хороший ответ / ссылку для него. Короче говоря, «auto» по умолчанию, так что это как удаление любых изменений в ширине элемента
Ответ 2 - вместо этого используйте width: 100%. Он заполнит 100% родительского контейнера, в данном случае «форму».
Как указано в другом ответе, width: auto не работает из-за того, что ширина генерируется атрибутом размера ввода, который не может быть установлен на «auto» или что-либо подобное.
несколько обходных решений, которые вы можете использовать, чтобы заставить его хорошо играть с моделью ящиков, но ничего фантастического, насколько мне известно.
Сначала вы можете установить заполнение в поле, используя проценты, убедившись, что ширина добавляет до 100%, например:
input {
width: 98%;
padding: 1%;
}
. Еще одна вещь, которую вы можете попробовать, - использовать абсолютное позиционирование с левым и правым значением 0. Используя эту разметку:
<fieldset>
<input type="text" />
</fieldset>
И этот CSS:
fieldset {
position: relative;
}
input {
position: absolute;
left: 0;
right: 0;
}
Это абсолютное позиционирование приведет к тому, что входные данные заполнят родительский набор полей горизонтально, независимо от отступов или полей ввода. Однако огромный недостаток этого заключается в том, что теперь вам приходится иметь дело с высотой набора полей, которая будет равна 0, если вы не установите ее. Если ваши входы имеют одинаковую высоту, это будет работать для вас, просто установите высоту поля, независимо от высоты входа.
Кроме этого есть некоторые решения JS, но я не люблю применять базовый стиль с JS.
-
1– vsync 19 February 2013 в 21:21
-
2– Jon Raasch 20 February 2013 в 01:49
-
3– vsync 20 February 2013 в 03:57
Единственный вариант, о котором я могу думать, это использовать width:100%. Если вы хотите иметь дополнение в поле ввода, а не просто поместить контейнер label вокруг него, вместо этого переместите форматирование на эту метку, а также укажите дополнение к метке. Поля ввода являются жесткими.
Это может быть не совсем то, что вы хотите, но мое обходное решение - применить стиль автоучета к обертке div, а затем установить ваш вход на 100%.
«Существует ли определение того, какая именно ширина: авто означает? Спецификация CSS кажется неопределенной для меня, но, возможно, я пропустил соответствующий раздел.»
Никто на самом деле ответил на указанную выше часть вопроса оригинального плаката.
Вот ответ: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
< blockquote>Пока значение ширины авто, элемент может иметь горизонтальный край, отступы и границу, не становясь более широкими, чем его контейнер ...
С другой стороны, если вы укажете ширину : 100%, общая ширина элемента будет составлять 100% от его содержащего блока плюс любой горизонтальный край, отступы и границы ... Это может быть то, что вы хотите, но, скорее всего, это не так.
To визуализировать разницу, которую я сделал в качестве примера: http://www.456bereastreet.com/lab/width-auto/
-
1– halfbit 8 January 2015 в 00:18