Question

我有一个非常基本的单输入字段，旁边有一个“提交”按钮。搜索按钮的固定宽度为104像素。两者都以浏览器视口总宽度的50％包装在一起。我的计划是在浏览器窗口放大时允许输入字段放大。

目前，对于我的特定浏览器窗口，我必须修改输入字段的宽度，以便从包装器的左侧扩展到提交按钮的左侧。然而，当我调整窗口大小时，它（显然）没有相应调整，因此留下了白色空隙。

我还没有在其他任何地方找到这个问题的答案。我很清楚，通常100％的宽度和104px的正确填充将解决其他内联元素的这种问题。但是，这里的问题是按钮似乎不能位于填充上方，而是移动到新行。

我该如何解决这个问题？谢谢！

编辑：这是我到目前为止所拥有的。访问jsfiddle.net/nWCT8/ 整个包装器需要居中，它需要大多数浏览器支持（虽然我不介意IE6不能使用它）。出于这个原因，我不认为'calc'是非常合适的。

Answer 1

因为你有一个固定的高度，你可以使用absolute位置来实现这个目标（如果你不需要支持IE 6）

编辑根据您的jsfiddle更新我的答案，但我现在只能在当前的Chrome，Safari和FF中测试它。

jsfiddle

要使用FF自动放大工作，您需要在其周围使用包装，input需要宽度为100%。为了防止将input元素的填充添加到width，需要使用以下css规则：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

box-sizing支持：IE 8 +，Chrome，Opera 7 +，Safari 3 +，Firefox

修改样式input元素通常是有问题的，因为它们是padding和margin。要获得想要在没有css3 calc功能的情况下实现的结果，您需要执行以下步骤：

定义周围.form-wrapper的高度并将其position设置为relative，以便此元素负责其包含的元素的位置absolute

将容器（.input-wrapper）包裹在input元素周围，并使用absolute，left:0px，{{top:0px定义其位置bottom:0px 1}}和right:[the width of your button]这样包装器的距离始终为width of the button到右侧。

将width元素的height和input设置为100%。要防止将input元素的填充添加到width，您需要将box-sizing设置为border-box。

使用button，absolute和top:0px设置bottom:0px到right:0的位置，并将宽度设置为width: [width of your button]

Answer 2

选择的答案很好，但是，它太复杂了。重写答案更简单：

HTML：

<div class="halfWidth">
    <div class="input-wrapper">
        <input type="text" placeholder="Input text here"/>
    </div>
    <button type="submit">Search</button>
</div>

CSS：

.halfWidth {
    width:50%;
}
.input-wrapper {
    margin-right:100px;
}
input {
    float: left;
    width: 100%;
    -ms-box-sizing: border-box; /* ie8 */
    -khtml-box-sizing: border-box; /* konqueror */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    box-sizing: border-box; /* css3 rec */
}

查看示例：
http://jsfiddle.net/nWCT8/4/

Answer 3

对于支持CSS3的较新浏览器，您可以使用calc()：

width: calc(100% - 50px); // change 50px to width of button

Answer 4

html：

<div>
    <input type="text" id="search" />
    <input type="button" value="Search" id="button" />
    <br class="clear: both;" />
</div>

的CSS：

 * {
    padding: 0;
    margin: 0;

}

div {
    width: 70%;
    margin: 0 auto;    
    padding: 5px;
    background: grey;      
}

#search {
    width: calc(100% - 110px);        
    float: left; 
}

#button {
    width: 104px;
    float: left;    
}

jsfiddle

如何使输入字段的宽度减去100％减去提交按钮的宽度？

4 个答案: