Получение Firefox для правильного растягивания ввода

Question

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

http://jsfiddle.net/hDFnW/10/

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

Он работает на любом другом , чем на входе ... Я прямо сейчас запутался.

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

Answer 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 все работает.

Пример

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

Answer 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/

Answer 3

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

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

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

Answer 4

Простым решением этой проблемы является использование 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/

Answer 5

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

Как вы сказали, вам не нужны обертки или div.Есть немного хакерский способ в этом jsfiddle

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

Обновление

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