5

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

这是我想要实现的近似值：http: //jsfiddle.net/t7tgJ/

我遇到的问题是，为了让输入填充它的容器，我需要给它一个流体宽度，比如 100%。但是，如果我将按钮浮动到右侧，我需要将该宽度降低到 90% 左右，以便按钮适合。但这仅适用于一种视口大小。

我想要的是类似的东西

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

或者，用简单的英语，我的输入应该延伸到右浮动按钮，并在任何视口大小下保持这种状态。

4

7 回答 7

5

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

1）您可以 display: flex在容器元素和 flex-grow: 1输入上使用。这是一个代码笔

2）您可以使用这篇文章overflow: hidden中的技巧。尽管您必须在您的字段上使用额外的包装器。input

于 2014-12-01T09:50:18.467 回答
2

像这样的东西？小提琴它似乎适用于固定大小的按钮:-)关键是为按钮腾出空间，并在输入周围添加边距......

于 2012-04-12T14:57:08.303 回答
2

尽管他们都表达了很好的想法，但我无法让各种建议在浏览器中看起来一致。在对此进行了迭代之后，我想出了以下解决方案，该解决方案看起来适用于所有 > IE7 并且不需要任何额外的容器。

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

基本上我的解决方案是：

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

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

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

于 2012-04-13T10:59:31.353 回答
1

找到了这个，它对我很有用。JSFiddle

  1. float: right在按钮上
  2. 给出该字段width: 100%并将其包装在一个 div 中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%;
}
于 2014-10-10T14:52:20.510 回答
1

改编后的托马斯小提琴只需稍作改动

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

...
于 2017-03-03T02:04:39.300 回答
0

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

更新：

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

于 2012-04-12T14:59:49.317 回答
0

display: flex;可以解决很多问题没有float
看到通过弹性布局解决http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/

于 2014-12-01T19:09:50.287 回答