8

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

目前，对于我的特定浏览器窗口，我必须将输入字段的宽度固定为从包装器的左侧扩展到提交按钮的左侧。但是，当我调整窗口大小时，它（显然）不会相应地调整，因此会留下空白间隙。

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

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

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

4

4 回答 4

9

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

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

jsfiddle

要使自动放大功能与 FF 一起正常工作，您需要在其周围使用包装器，并且input需要具有100%. 为了防止input要添加到以下 css 规则的元素的填充，width需要使用：

-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. 要在没有 css3calc功能的情况下获得想要的结果，您需要执行以下步骤：

  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. 将元素的widthand设置height为。为了防止要添加到的元素的填充，您需要将 设置为。input100%inputwidthbox-sizingborder-box

  4. 将的位置设置为button，absolute并将宽度设置为top:0pxbottom:0pxright:0width: [width of your button]

于 2013-07-04T18:44:22.420 回答
9

选择的答案工作正常，但是，它过于复杂。将答案重写为更简单：

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/

于 2013-11-08T19:23:06.467 回答
6

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

width: calc(100% - 50px); // change 50px to width of button
于 2013-07-04T18:49:06.380 回答
0

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

于 2013-07-04T18:49:07.567 回答