CSS: fluid text input with floated-right button

问题:

I'm trying to create a fluid text input with a submit button to its right. The input and the button should fill 100% of its container.

Here is an approximation of what I'm trying to achieve: http://jsfiddle.net/t7tgJ/

The problem I'm running into to is, in order to have the input fill its container I need to give it a fluid width, like 100%. However if I float the button right, I'll need to bump down that width to something like 90% so that the button can fit. But this only works for one viewport size.

What I want is something like

input { width: 100% - {button.width}; }
button { float: right; }

or, in plain english, my input should extend up to the right-floated button and remain that way at any viewport size.

回答1:

I think there are 2 solutions to your problem.

1) You can use display: flex on a container element and flex-grow: 1 on your input. Here is a codepen

2) You can use overflow: hidden trick from this post. Though you'll have to use additional wrapper on your input field.

回答2:

Something like this? fiddle It seems to work with fixed-size button :-) The point is to make space for button with adding margin to wrapper around input...

回答3:

Although they all expressed good ideas, I was having trouble getting the various suggestions to look consistant across browsers. After iterating on this a bunch I came up with the following solution which looks good for everything > IE7 and doesn't require any additional containers.

http://jsfiddle.net/tjlahr/hUeZS/

Basically the solution for me was:

1) button { float: right; position: relative; top: -28px; }

2) Use browser resets to cancel some of the extra padding and margins that get added to the button element.

3) Set the height of the input and button to further maintain consistant sizes between browsers.

回答4:

Adapted thomas fiddle just with a small change

http://jsfiddle.net/hUeZS/147/

Instead of using top: -28px, try margin-top: -28px. This is in my case better because the element under it still get the full width and won't be affected.

...

form button {
    /* style */
    background-color: lightblue;
    border: none;
    padding: 7px;

    /* to match input height above */
    height: 28px;

    /* removes the box from DOM */
    float: right;

    /* alternative to negative margin-top,
    which seems to hide my button behind the input */
    position: relative;
    top: 0px;
    margin-top: -28px;
}

...

回答5:

Apply a negative top margin on the button: http://jsfiddle.net/t7tgJ/2/

UPDATE:

To accomplish this with the new condition of a fixed button width, float the input to the left and the button to the right. But, you have to apply a clearfix to the form element since it's height collapses with all floated children: http://jsfiddle.net/t7tgJ/3/

回答6:

Found this and it worked great for me. JSFiddle

1. float: right on the button
2. Give the field width: 100% and wrap it in a div with overflow: hidden

HTML

<a href="#" class="search-btn">Search</a>
<div class="search-field-wrap">
  <input class="search-input" type="text" name="search">
</div>

CSS

.search-btn {
    float: right;
}
.search-field-wrap {
    overflow: hidden;
}
.search-input {
    width: 100%;
}

回答7:

display: flex; can solve much problems without float
See solved by flex layouts http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/