Элемент html <input> игнорирует свойства CSS left + right?
Я заметил, что элемент <input> в HTML игнорирует пару свойств CSS "left" и "right". То же для пары «верх» и «низ». См. Пример кода ниже:
<html>
<head>
<style><!--
#someid {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
--></style>
</head>
<body>
<input type = "text" id = "someid" value = "something"/>
</body>
</html>
<input> должен занимать почти все пространство в браузере (за исключением 10-пиксельной границы вокруг него). Он отлично работает в Safari, но в FireFox и IE <input> остается маленьким в верхнем левом углу браузера.
Если я использую «left» и «width», «top» и «height», тогда все работает нормально. Однако я не знаю, что такое ширина и высота, я хочу, чтобы они регулировались в зависимости от размера окна браузера.
Есть идеи, как это обойти?
Спасибо.
Я получил -1 за предложение :)
+1 У меня такая же проблема!
См. Этот stackoverflow.com/a/16288462/340290, чтобы развернуть элементы input в соответствии с левым и правым значениями в абсолютном макете БЕЗ элемента оболочки. (см. мой комментарий stackoverflow.com/questions/16284087/…, чтобы узнать о других проблемах с оболочкой)
Ответы 4
Он не игнорирует левый или верхний, вы увидите, что он позиционируется на 10 пикселей наружу. Происходит то, что право и низ не соблюдаются. Элементы формы обрабатываются немного специально в механизмах компоновки, вполне возможно, что FF / IE считают ширину / максимальную длину ввода более важной, я действительно не разбирался, почему это может быть.
Хотя это немного странно. Возможно, вам лучше было бы взглянуть на <textarea>, который предназначен для ввода большого текста, который вы можете увеличить до 100% размеров, применив width: 100%; height: 100%; и позаботившись о поле 10 пикселей в контейнере div.
WFM:
<html>
<head>
<style>
body
{
margin: 0px;
}
div
{
position: absolute; margin: 2%; width: 96%; height: 96%;
}
textarea
{
position: absolute; width: 100%; height: 100%;
}
</style>
</head>
<body>
<div>
<textarea></textarea>
</div>
</body>
На самом деле textarea ведет себя так же. Мне нужны как поля ввода, так и текстовые поля в довольно сложном макете. Я свел проблему к этому простому сценарию; если я смогу это сделать, то и более сложный макет тоже подойдет.
Я думаю, вам лучше тогда опубликовать более полный html / css, но посмотрите мои изменения.
Я понял. Я попробовал вашу идею с вводными данными, и она тоже работает. В основном, если я помещаю фиктивные div вокруг своих входов, я могу установить для входов 100% ширину и высоту, а затем я просто позиционирую div. Спасибо.
width: 100% и height: 100% должны быть добавлены к телу, а также к элементам html.
Вы можете использовать Wrapper DIV
<html>
<head>
<style><!--
#wrapper {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
#someid {
/* position:relative; EDIT: see comments*/
height:100%;
width:100%
}
--></style>
</head>
<body>
<div id = "wrapper">
<input type = "text" id = "someid" value = "something"/>
</div>
</body>
</html>
Кроме того, действительно ли требуется position: relative на входе? Не думаю, что положение передается по наследству.
@SpoonMeiser. Спасибо. (Английский не мой родной язык). Вы где и поправляете насчет позиции.
Спасибо! Большая помощь! У меня была такая же проблема.
http://reference.sitepoint.com/css/bottom скажем, относительно Internet Explorer (<= 6)
don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height
В Safari это выглядит не так, как должно отображаться. Поскольку вы не указали значение высоты, input по умолчанию будет использовать размер последнего унаследованного размера шрифта.
Правое и нижнее расположение также будет проигнорировано, потому что вы пытаетесь одновременно установить верхнее и левое поля. Похоже, в этом случае они имеют приоритет.
Если вам нужно использовать поле input и отображать его внутри всей ширины и высоты окна браузера во время его просмотра, вам нужно переделать CSS следующим образом:
body{
margin:10px;
}
#someid{
display:block;
margin:0 auto;
width:100%;
height:100%;
}
Это расширит поле input до такой высоты и ширины, в которой находится окно браузера пользователя. У него также будет поле по 10 пикселей с каждой стороны от окна браузера.
Если вам нужно иметь поле, установите его в стиле body или обертку DIV вокруг поля ввода.
обратите внимание, что input type = 'text' будет, независимо от того, насколько он большой, даст вам только одну строку textinput. Вместо этого используйте <textarea>.