Question

我有以下html：

<div id="holder">
    <span>Search for</span>
    <input id="srchfor" />
    <span>near</span>
    <input id="srchin" />
    <span>submit</span>
</div>

包含div是固定宽度。 3个跨度的宽度取决于字体大小。是否可以使两个输入采用宽度，使它们的大小相同，并且消耗holder中的所有剩余空间？或者这需要使用javascript吗？

编辑：我的目标是将5个元素全部放在一行上，而不是分成几行。

Answer 1

这是一篇很老的帖子，但我偶然发现它并认为我会为下一个人回答它。这是一个CSS / HTML代码段，可以解决此问题。它有点像HTML5 flexbox，但没有HTML5或flexbox。您可以为所需的2个部分添加宽度，第三个部分将填充剩余的空白。

<style type="text/css">
    .form-group {
        border: 1px solid black;
        margin-bottom: 20px;
        padding: 10px;
        width: 75%;
    }

    .a {
        float: right;
        margin-left: 10px;
        width: 30%;
    }

    .a input {
        width: 100%;
    }

    .b {
        float: left;
        margin-right: 10px;
        width: 33%;
    }

    .b input {
        width: 100%;
    }

    .c {
        display: block;
        overflow: hidden;
    }

    .c input {
        width: 100%;
    }
</style>

<div id="wrapper">
    <div class="form-group">
        <span class="a">
            <label>Thing 1</label><br />
            <input type="text" />
        </span>

        <span class="b">
            <label>Thing 2</label><br />
            <input type="text" />
        </span>

        <span class="c">
            <label>Thing 3</label><br>
            <input type="text" />
        </span>
    </div>

    <div class="form-group">
        <div class="a">
            <label>Thing 1</label><br />
            <input type="text" />
        </div>

        <div class="b">
            <label>Thing 2</label><br />
            <input type="text" />
        </div>

        <div class="c">
            <label>Thing 3</label><br>
            <input type="text" />
        </div>
    </div>
</div>

Answer 2

好吧，您可以将显示类型从display: inline更改为display: block，以使其填充空间。但我不知道内联是否是一项要求。

Answer 3

您必须为span元素选择固定宽度，并使用display {inline-block属性，例如this example。

css - 有两个内联输入占用剩余空间

3 个答案: