используя position: absolute для установки ширины ввода

Question

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

У кого-нибудь есть решение, чтобы придать ему форму?

Answer 1

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

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

Тогда CSS это:

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%;
    }

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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