logo标签列表

CSS：带右浮动按钮的流体文本输入框

cssformsfluid-layout
5
我正在尝试创建一个带有右侧提交按钮的流体文本输入框。输入框和按钮应该填满其容器的100%。
以下是我试图实现的近似效果：http://jsfiddle.net/t7tgJ/ 问题是，为了让输入框填满其容器，我需要给它一个流体宽度，比如100％。但是，如果我将按钮向右浮动，我就需要将宽度调整为90％之类的值，以使按钮适合。但这只适用于一个视口大小。
我想要的是：
input { width: 100% - {button.width}; }
button { float: right; }

或者用通俗易懂的语言说，我的输入框应该延伸到右侧浮动按钮，无论在任何视口大小下都保持不变。
按钮的宽度是否也必须根据其值具有流动性？ - Christofer Eliasson
按钮的值不会改变，因此可以假定它是固定大小的。 - Thomas
7个回答
5
我认为你的问题有两种解决方法。
1) 你可以在一个容器元素上使用display: flex，并在你的输入框上使用flex-grow: 1。这是一个代码片段（点击此处） 2) 你可以使用这篇文章中介绍的overflow: hidden技巧。虽然你需要在你的input字段上使用额外的包装器。
1
解决方案1是我目前最喜欢的。谢谢。 - mihai
2

像这样吗？示例代码。它似乎适用于固定大小的按钮 :-) 关键是通过向输入框周围的包装器添加边距来为按钮腾出空间...

我喜欢这个想法。我稍微调整了你的fiddle，使表单字段和按钮紧密结合。http://jsfiddle.net/tjlahr/t7tgJ/6/。然而，在IE8和IE9中，按钮低了2px，并且在IE7中布局会断裂。虽然不是世界末日，但我想找到适用于跨浏览器的解决方法，至少可以兼容IE7。 - Thomas
2
尽管他们都提出了好的想法，但我在让各种建议在不同浏览器中保持一致方面遇到了困难。经过多次迭代，我想出了以下解决方案，它在除 IE7 之外的所有浏览器中都很好看，并且不需要任何额外的容器。

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

基本上对我来说解决方案是：
1）button { float: right; position: relative; top: -28px; } 2）使用浏览器重置来取消添加到按钮元素的一些额外填充和边距。
3）设置输入框和按钮的高度以进一步保持浏览器之间的一致大小。
谢谢@Thomas。我知道没有人喜欢表格。但为什么不在这里使用一个呢？请参见适应的fiddle：https://jsfiddle.net/hUeZS/143/（快速且简单）。 - Swiss Mister
按钮下方的文本 - njzk2
1

我发现 this ，对我非常有用。JSFiddle

  1. 在按钮上使用 float: right
  2. 给字段设置 width: 100% 并将其包装在带有 overflow: hidden 的 div 中

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%;
}
1
适应 Thomas Fiddle，只做了一个小改动。

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

...
0
0
在按钮上应用负上边距：http://jsfiddle.net/t7tgJ/2/ 更新： 为了实现新的固定按钮宽度条件，将输入浮动到左侧，将按钮浮动到右侧。但是，必须对表单元素应用clearfix，因为它的高度会随所有浮动子元素而折叠：http://jsfiddle.net/t7tgJ/3/
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接