填充浮动元素之间的空间 [英] Filling space between floating elements

问题描述

我有包含浮动元素的容器div（灰色框）：

I have container div (gray box) with floating elements inside:

条浮动到左侧，按钮浮动到右侧。现在我想要文本框填充条和按钮之间的空白空间。

Bars are floating to the left and button if floating to the right. Now I want textbox to fill the empty space between the bars and the button.

请注意，在打字期间，小节数可能会有所不同，因此文本框应能够相应调整大小。因此，具有静态宽度的解

Please note that bars count may vary during typind so textbox should be able to resize accordingly. So solutions with static widths (even if they are expressed in %) will not work.

编辑：

How can I do it?

/ strong>

以下是我的代码：

HTML：

<div id="dp-container">
    <ol id="tag-list">
        <li dp-item class="dp-bar-table">sales</li>
        <li dp-item class="dp-bar-field">cost</li>
    </ol>

    <input id="dp-input-str" type="text">
    <input type="button" value="GO" style="float: right;">
    <div style="clear:both;"></div>
</div>​

CSS：

body {
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

ol {
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    list-style-type: none;
}

li[dp-item] {
    background-color: #e0ffff;
    display: inline-block;
    float: left;
    padding: 3px;
    margin: 2px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#EBEBEB));
    border: 1px solid lightgray;
    border-radius: 3px;
}

.dp-bar-table {
    color: blue;
    font-weight: bold;
}

.dp-bar-field {
    color: blue;
}

#dp-input-str {
    border: none;
    display: inline-block;
    margin-left: 5px;
    margin-top: 3px;
    width: auto;
    outline: none;
    font-size: 12pt;
    vertical-align: middle;
    line-height: 25px;
    box-shadow: none;

#dp-container {
    display: inline-block;
    border: 1px solid #d3d3d3;
    height: 32px;
    padding: 3px;
    width: 90%;
}

#dp-find-str {
    color: gray;
    float: left;
    margin-top: 10px;
    margin-right: 8px;
}

推荐答案

本 http://jsfiddle.net/bYmM4/7/ 。编写方式如下：

HTML

<div class="main">
 <input type="button" value="test" />
 <input type="button" value="test" />
    <input type="button" value="Go" class="go"/>
    <div class="textbox">
     <input type="text" />
    </div>
</div>

CSS

.main{position:relative; border:#333 1px solid}
input[type="button"]{width:8%; float:left;}
.textbox{
    background-color:grey;
    overflow:hidden;
    position:relative;
}
.textbox input{
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
input.go{float:right}

这篇关于填充浮动元素之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！