html <input>элемент игнорирует свойства CSS влево + вправо? - PullRequest
Новая
       10

html <input>элемент игнорирует свойства CSS влево + вправо?

21 голосов
/ 16 января 2009

Я заметил, что элемент <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», то все работает нормально. Однако я не знаю, что такое ширина и высота, я хочу, чтобы они корректировались в зависимости от размера окна браузера.

Есть идеи, как обойти это?

Спасибо.

Ответы [ 4 ]

15 голосов
/ 16 января 2009

Вы можете использовать упаковщик 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>
4 голосов
/ 16 января 2009

Это не игнорирование влево или вверх, вы увидите, что он позиционируется на 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>

1 голос
/ 16 января 2009

http://reference.sitepoint.com/css/bottom скажем, относительно интернет-обозревателя (<= 6) </p>

не поддерживает спецификацию как положения, так и размеров абсолютно позиционированного элемента, используя верх, правый, нижний и левый вместе; они будут использовать последнюю указанную вертикальную и горизонтальную позиции, и их размеры должны быть указаны с использованием ширины и высоты

0 голосов
/ 25 июля 2009

В Safari он выглядит не так, как должен отображаться. Поскольку вы не указали значение высоты, input по умолчанию будет соответствовать размеру последнего унаследованного размера шрифта.

Правое и нижнее позиционирование также будут игнорироваться, поскольку вы пытаетесь установить верхнее и левое поля одновременно. Похоже, они имеют преимущество в этом случае.

Если вам нужно использовать поле input, чтобы оно отображалось по всей ширине и высоте окна браузера во время его просмотра, вам нужно повторить CSS следующим образом: 

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

Это растянет поле input до высоты и ширины, когда у пользователя есть окно браузера. Он также будет иметь поле вокруг каждой стороны в 10 пикселей от окна браузера.

Если вам нужно иметь поле, установите его в стиле body или обертке DIV вокруг поля ввода.

...