Как Firefox правильно растягивает вход

Это упрощенная версия того, что я пытаюсь сделать. Работает в любом браузере, отличном от FF:

В принципе, я пытаюсь получить ввод для применения width:auto;, когда установлен position:absolute;left:200px;right:0px.

Он работает ни на чем другом, кроме ввода... Я сейчас немного смущен.

Как я могу выполнить это в Firefox или, еще лучше, во всех браузерах?

Ответ 1

Вы можете обернуть input с помощью div, а затем он будет работать.

CSS

div {
    display    : block;
    position   : absolute;
    left       : 100px;
    right      : 0px;
    top        : 3px;
}

input {
    width      : 100%;  
    border     : 1px solid #000;
    background : #FFF;
}

jsFiddle, используя другие примеры.

jsFiddle все работает.

Пример

Вы можете получить аналогичный эффект (хотя и не тот же) используя поплавки.

Ответ 2

Очень простое исправление... не требуется упаковка. IE, Chrome, FF - все хорошо.

http://jsfiddle.net/LGn9A/1/

не смешивайте пиксели с процентами:-) (в данном случае)

ul {
    width       : 95%; /* here */
    font        : 12px/1.4 tahoma; /* global aethetics */
    ....
}

li { ... }

input, span {
    display    : block;
    position   : absolute;
    left       : 20%; /* here */
    right      : 0px;
    width      : 80%; /* and here */
}

~~FF-- будет сотрудничать с использованием white-space:nowrap; в IE и Chrome.~~

<li>Title
    <span style="border:0px">
        <input style="width:100%;left:0px;white-space:nowrap;">
    </span>
</li>

http://jsfiddle.net/hDFnW/16/

Ответ 3

Простым решением этой проблемы является использование position:relative на входе и назначение его левой позиции и значения ширины с использованием процента, а не px. Это потому, что родительская ul ширина указана в процентах, а не px. В противном случае решение было бы легко, если бы фиксированная ширина была присвоена элементу ul

<ul>
    <li>Title<input></li>
    <li>Title<input></li>
</ul>

ul {
    width       : 95%;
    border      : 1px solid #000;
    font-family : tahoma;
    padding     : 5px;
    position:relative;
}

li {    
    background-color : #EEE;
    margin           : 2px;
    padding          : 3px;
}

input {     
    position:relative;
    left:20%;
    width:75%; /* I used 75% to give an extra 5% room for paddings and margins specified by parent elements ex: li ul) */
}

Проверьте рабочий пример http://jsfiddle.net/t5CvC/1/

Ответ 4

Я придумал два решения:

http://jsfiddle.net/w6fGY/ - фиксированная ширина для <span> и <input>
http://jsfiddle.net/B4MKu/ - все <input> завернуты в <span> и width:100%.

Я надеюсь, что это будет полезно.

Ответ 5

Кажется, -moz-calc будет работать, но только в FF4.

Как вы сказали, вы не хотите обертки или divs. В этом jsfiddle

Резюме: Измените модель размера коробки, чтобы она содержала границы и отступы, а затем добавьте 100px в качестве левой прокладки, чтобы значение входного текста перемещалось, но ширина оставалась на уровне 100%; - затем клип, чтобы отрубить дополнительный левый бит и снова отобразить текст заголовка. Проблема только в том, что нет левой границы, я пытался добавить фальшивый с псевдоэлементом. Само собой разумеется, что фальшивая рамка не работает в IE8, и ни одна из них не работает в IE7

Update

обновленный код для использования фонового изображения, которое теперь также дает эффект границы в IE == > jsfiddle