Использование положения: абсолютное для установки ширины входов

Простой, но раздражающий - я пытаюсь установить ширину ввода [type = text], используя абсолютное позиционирование (то есть right: 10px; left: 10px), но я не могу заставить его играть в мяч.

Есть ли у кого-нибудь решение выбить его в форму?

Ответ 1

Собственно, то, что вы делаете, отлично работает. Вам просто нужно помнить, чтобы установить положение родительского элемента.

<div>
   <input type="text">
</div>

Затем CSS it:

div {
    width: 400px;
    position: relative;
}
input {
    position: absolute;
    left: 5px;
    right: 5px;
}

Это приведет к тому, что поле ввода будет 390px.

Если вы установите гибкость div, тогда будет поле ввода.

edit:, похоже, работает только в Chrome, поэтому вам нужно будет поместить его в другой элемент. Это также работает в FF и IE:

<div id="parent">
    <div><input type="text"></div>
</div>

с этим CSS:

#parent {
    position: relative;
    width: 400px;
}
  #parent div {
      position: absolute;
      left: 5px;
      right: 5px;
  }
    #parent div input {
        width: 100%;
    }

Это имеет ожидаемый эффект. Немного хак-иш, может быть...

Ответ 2

То, что вы пытаетесь сделать, не может быть сделано таким образом, насколько я знаю. Одно из значений (слева или справа) должно быть достаточным для позиции, тогда вам просто нужно установить width и height.

Ответ 3

Как сказал Марко, вы просто не можете так поступать. Если вы не знаете ширину страницы, вам нужно будет использовать javascript для достижения этого эффекта:

$('#myInput').css({ right: 10, position: 'absolute', width: $(document).width() - 20 })

Ответ 4

Позиционирование css не работает так, как вы этого хотите. Все, что он делает, устанавливает его положение относительно родителя. Ключ в том, что (с большинством браузеров) вы можете указать только один из левого/правого и один из верхнего/нижнего.

Вы можете установить ширину входного сигнала на 100%, а затем установить padding-left на 10px и padding-right на 10px родительского контейнера ввода. Это должно дать вам желание, которое вы хотите.