0

I'm working with Zurb's Foundation to create a responsive website, however I've run in to an issue when trying to make my search form responsive.

I have an input field, then to the right of it a <button> to submit the form. The button has an image within it, which is 70px wide. So what I need to do is have the input field take up 100% of whatever is remaining.

I've tried looking at the overflow: hidden; method without much luck. I've even tried using percentages, but when you go down to the mobile size the button image is really small due to resizing (a part of foundation).

Here's what I have:

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

1 回答 1

3

Fixed it by using:

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

This floats the submit button to the right of the div and because of it's set width and overflow: hidden; on the input's parent div it fills the remaining space with a 100% width.

于 2013-09-26T12:43:59.820 回答