Question

Stack Overflow的长期用户，第一次提问！所以这里。

我有一个非常基本的html标记，带有一个div，包含一个输入框和一个内联样式的按钮。

位于右侧的按钮的设置宽度为90px。输入框需要填充父div左侧和按钮之间的剩余空间。

所以我基本上需要输入和按钮来填充父div，尽管一个是固定宽度，一个可能会根据设备进行更改。

问题是，由于父div响应并且不断变化，我无法在输入框上设置一定宽度，使其填充所有可用空间直至按钮。

更糟糕的是，我无法使用简单的javascript解决方案或应用于输入框的优秀css calc（）解决方案（例如calc（100％ - buttonWidth））。

也许我现在已经编程了太多时间，而且我无法在我面前看到简单的解决方案。任何想法？

非常感谢提前。

代码示例：

/ HTML /

<div id="parent">
    <input type="text" name="rq" id="rq" value="" x-webkit-speech/>
    <button id="search_btn" class="btn-blue">
    </button>
</div>

/ CSS /

#parent{
    min-height: 123px;
    border: solid 3px #1B8BDE;
    border-radius: 5px;
    background-color: #DCECf7;
    display: block;
    position: relative;
    min-width: 234px;
}
#rq{
    width: 93%;
    font-size: 14px;
    border: 1px solid #D8D8D8;
    border-radius: 3px;
    padding: 6px;
    vertical-align: middle;
    position: relative;
    display: inline;
}
#search_btn{
    width: 90px;
    height: 30px;
    margin-left: -3px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding-top: 2px;
    padding-left: 4px;
    font-family: "Arial";
    font-weight: bold;
    font-size: 15px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    border-color: rgb(22, 96, 168);
    background-color: rgb(0, 140, 226);
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid rgb(22, 96, 168);
    float: right;
    position: relative;
    right: 0px;
    display: inline;
}

正如我所说，问题是设置输入的宽度以占用所有父div的宽度减去按钮而不使用javascript或css的计算;这是因为父div总是会改变宽度。

Answer 1

您可以使用css的表格显示属性：

<div>
<div class="col"><input type="text"></div>
<div class="col"><button>test</button></div>  
</div>

CSS

div{
width:100%;
display: table;
}
button{
width:90px;
}

.col {
display: table-cell;
}

.col input{
width: 100%;
}

Fiddle

Answer 2

您是否在输入元素上尝试了width:auto？

Answer 3

我无法评论太低的代表。但对于想要玩弄想法的人来说，这是一个非常快速的方法：

<html>
<head></head>
<body>

<div style="height:200px; width: 100%; background-color:#000">hi

<span style="width:90px; background-color:#fff">hello</span>
<input style="background-color:#f00; position:relative; width: auto; display:inline" />

</div>

</body>
</html>

http://jsfiddle.net/ruxp3/

（当接受答案时，我将删除此内容，为不分离CSS而道歉 - 非常快速的小提琴创作）

CSS在响应div中设置两个内联元素

3 个答案: