Как вы можете ввести родительский элемент ввода?

Question

У меня есть следующий HTML:

<div class="container"> 
    <form> 
     <input class="search" type="text" /> 
     <button class="submit" type="submit">Go</button> 
    </form> 
</div> 

Я пытаюсь сделать ввод текста заполняйте до размера контейнера, за вычетом ширины кнопки Go, которая будет рядный справа. Тем не менее, я не могу получить ввод, чтобы заполнить ширину контейнера. У меня есть следующий CSS (упрощенный):

.container { 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 

.search { 
    left: 0; 
    position: absolute; 
    right: 40px; 
} 

.submit { 
    position: absolute; 
    right: 0; 
    width: 40px; 
} 

, производящие следующая конструкция:

Как я на самом деле получить, что внутреннее текстовое поле, чтобы заполнить всю ширину родителя? Без использования%, так как мне нужно, чтобы он растянулся прямо до кнопки и не стал дальше.

Answer 1

я понял, как сделать это с кросс-браузерный CSS:

Я завернул вход в дополнительный DIV:

<div class="container"> 
    <form> 
     <div class="search-padder"> 
      <input class="search" type="text" /> 
     </div> 
     <button class="submit" type="submit">Go</button> 
    </form> 
</div> 



.container { 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 

.search-padder { 
    padding-right: 40px; 
    width: 100%; 
} 

.search { 
    width: 100%; 
} 

.submit { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 40px; 
} 

Answer 2

, если вы не используете javascript или calc, поле ввода будет перекрываться под кнопкой, потому что оно установлено в px и input в процентах!

.search { 
    left: 0; 
    position: absolute; 
    right: 60px; 
    width:90%; /* this is the deal here*/ 
} 

to get you started

Answer 3

Для Mozzila добавить следующие CSS в .search

width: -moz-available; 

Answer 4

я бы просто пойти с Jquery.

$(document).ready(function(){ 
    var inputWidth = $('.container').width() - $('.submit').width(); 
    $('input').css('width', inputWidth);   
});