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

Question

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

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

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

我怎么解决这个问题？谢谢!

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

Answer 1

选择的答案很好,但是,它太复杂了.重写答案更简单:

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 2

因为你有一个固定的高度,你可以使用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功能的情况下实现的结果,您需要执行以下步骤:

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

2. 包裹的容器(.input-wrapper)围绕所述input元件,分别定义其位置absolute与left:0px,top:0px,bottom:0px和right:[the width of your button] 这种方式包装总是具有的距离width of the button向右侧.

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

4. 的位置设置button到absolute用top:0px,bottom:0px和right:0与所述宽度设定为width: [width of your button]

Answer 3

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

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