Входная ширина 100% оставшейся ширины

Я работаю с Фондом Зурба для создания отзывчивого веб-сайта, однако я столкнулся с проблемой при попытке сделать мою поисковую форму отзывчивой.Входная ширина 100% оставшейся ширины

У меня есть поле ввода, затем справа от него <button>, чтобы отправить форму. У кнопки есть изображение внутри него, ширина которого составляет 70 пикселей. Поэтому мне нужно, чтобы поле ввода занимало 100% от того, что осталось.

Я пробовал смотреть на метод без везения. Я даже пытался использовать проценты, но когда вы переходите к мобильному размеру, изображение кнопки очень мало из-за изменения размера (часть фундамента).

Вот что у меня есть:

HTML:

<div class="form-search"> 
    <input id="search" type="text" class="input-text" /> 
    <button type="submit" class="button expand postfix"> 
     <img src="images/search-submit.png" /> 
    </button> 
</div>

CSS:

div.form-search { overflow: hidden; } 
div.form-search input { float:left; overflow: hidden; background: #ebebe7; border: none; padding: 1em; outline: none; } 
div.form-search button { display: block; background: none; border: none; padding: 0; margin: 0; }

источник

2013-09-26 Karl

Вы пробовали сочетания 'width',' min-width', 'max-width' – DanFromGermany

Вы также можете использовать медиа-запросы, чтобы настроить размер при определенной ширине. Или просто дайте ему минимальную ширину. –

Вы должны также JSfiddle this yo –

Fixed его с помощью:

HTML:

<div class="form-search"> 
    <button type="submit" class="button expand postfix"> 
     <img src="images/search-submit.png" /> 
    </button> 
    <div> 
     <input id="search" type="text" name="search" class="input-text" /> 
    </div> 
</div>

CSS:

div.form-search div { overflow: hidden; } 
div.form-search div input { width: 100%; background: #ebebe7; border: none; padding: 1em; outline: none; } 
div.form-search button { float: right; width: emCalc(70); background: none; border: none; padding: 0; margin: 0; }

Это поплавки кнопку отправки справа от DIV и из-за это установить ширину и переполнение: скрытый; на родительском div ввода он заполняет оставшееся пространство шириной 100%.

источник

2013-09-26 12:43:59 Karl

Входная ширина 100% оставшейся ширины

ответ

Смежные вопросы