Question

我有以下HTML：

<div id="my_bar">
    <div id="my_input">
        <select name="my_name">
            <option value="5min">5-Min</option>
            <option value="1hour">Hour</option>
            <option value="1day">Day</option>
        </select>
    </div> <span>
        <input type="submit" id="my_input_submit" value="Submit">
    </span>
</div>

和CSS：

#my_bar {
    width: 100%;
    height: 45px;
    overflow: hidden;
    padding-bottom: 0px;
    background: green;
}
#my_bar span {
    height: 100%;
    display: inline;
    overflow: hidden;
    padding-left: 0px
}
#my_input {
    height: 100%;
    width: 100%;
    text-align: center;
    display: inline;
}
#my_input_submit {
    height: 100%;
    float: right;
}

我希望select最大化以填充div和select的高度同时水平填充width: 100%菜单和提交按钮之间的所有额外空格，以便我在后台看不到任何绿色。

请帮我解决这个问题。

{{1}}不起作用。

Answer 1

<强> demo

<div id="my_bar">

        <select name="my_name">
            <option value="5min">5-Min</option>
            <option value="1hour">Hour</option>
            <option value="1day">Day</option>
        </select>


        <input type="submit" id="my_input_submit" value="Submit">

</div>

CSS

#my_bar {
    height: 45px;
    background: green;
}
#my_bar select{
    height: 100%;
    width: 90%;
    float: left;
}
#my_input_submit {
    height: 100%;
    width:10%;
    float: right;
}

如果您不喜欢%，您可以随时为旧浏览器保留此解决方案，并使用CSS3 calc()

进行更精确的计算

Answer 2

丑陋，但基础知识就在这里......

http://jsfiddle.net/z5gt4tLe/5/

设置身体和身体html的高度和宽度为100％。将宽度设置为100％的计算 - 按钮的宽度（width: calc(100% - 60px);），现在您需要整理我创建的混乱。

哦，我还在所有元素上将border / margin / padding设置为0。您需要将它们添加到您想要的位置。我总是认为这对于跨浏览器的兼容性是明智的。

Answer 3

Flexbox救援：http://jsfiddle.net/rj05v1yg/。（需要现代浏览器）。

HTML：

<div id="my_bar">
    <select name="my_name">
        <option value="5min">5-Min</option>
        <option value="1hour">Hour</option>
        <option value="1day">Day</option>
    </select>
    <input type="submit" id="my_input_submit" value="Submit" />
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

#my_bar {
    height: 45px;
    background: green;
    display: flex;
    flex-direction: row;
}

#my_bar > select {
    flex: 1 1 auto;
}

#my_bar > input {
    flex: 0 0 auto;
}

Answer 4

Flexbox确实有效。如果您想坚持基本的浮动样式布局，可以对display和height属性进行一些小的调整。

http://jsfiddle.net/philsinatra/rotppuep/1/

HTML：

<div class="my-bar">
    <div class="my-input">
        <select name="my_name" id="my_name">
            <option value="">5 Min</option>
            <option value="">Hour</option>
        </select>
    </div>
    <div class="form-controls">
        <input type="submit" id="my-submit" value="Submit">
    </div>
</div>

CSS：

.my-bar {
    background: red;
    overflow: auto;
    width: 100%;    
}
.my-input {
    float: left;
    width: 95%;
}
.my-input select {
    display: block;
    height: 45px;
    width: 100%;
}
.form-controls {
    float: left;
    width: 5%;
}
.form-controls input {
    height: 45px;
    width: 100%;
}

HTML使用select和input填充div

4 个答案: