Question

我正在尝试使用右侧的提交按钮创建流畅的文本输入。输入和按钮应填充其容器的100％。

以下是我想要实现的目标的近似值：http://jsfiddle.net/t7tgJ/

我遇到的问题是，为了让输入填充其容器，我需要给它一个流体宽度，如100％。但是，如果我向右浮动按钮，我需要将宽度减小到90％，以便按钮可以适合。但这仅适用于一个视口大小。

我想要的是像

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

或者，用简单的英语，我的输入应该扩展到右浮动按钮，并保持在任何视口大小。

Answer 1

我认为您的问题有两种解决方案。

1）您可以在容器元素上使用display: flex，在输入中使用flex-grow: 1。 Here is a codepen

2）您可以使用this post中的overflow: hidden技巧。虽然您必须在input字段上使用其他包装器。

Answer 2

这样的东西？ fiddle它似乎适用于固定大小的按钮:-)关键是为按钮添加空间，为输入包装器添加边距...

Answer 3

尽管他们都表达了很好的想法，但我无法获得各种建议，以便在浏览器中保持一致。在迭代了这一堆之后，我想出了以下解决方案，它看起来对一切都很好＆gt; IE7并不需要任何其他容器。

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

基本上我的解决方案是：

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

2）使用浏览器重置来取消添加到按钮元素的一些额外填充和边距。

3）设置输入和按钮的高度，以进一步保持浏览器之间的大小一致。

Answer 4

改编托马斯小提琴只是一个小小的改变

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

不使用top：-28px，请尝试margin-top：-28px。这在我的情况下更好，因为它下面的元素仍然可以获得整个宽度，并且不会受到影响。

...

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

...

Answer 5

在按钮上应用负上边距：http://jsfiddle.net/t7tgJ/2/

<强>更新

要使用固定按钮宽度的新条件完成此操作，请将输入浮动到左侧，将按钮浮动到右侧。但是，您必须对表单元素应用clearfix，因为它的高度与所有浮动的子项一起崩溃：http://jsfiddle.net/t7tgJ/3/

Answer 6

找到了this，这对我很有帮助。 JSFiddle

float: right
提供字段width: 100%并将其打包在包含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%;
}

Answer 7

display: flex;可以在没有float的情况下解决很多问题。请参阅弹性布局解决http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/

CSS：具有浮动右键的流体文本输入

7 个答案: