css - 自动调整元素的组成

Question

我有很多元素需要在同一行对齐，除了第一个标签，我真的需要选择宽度来适应窗口大小(在调整大小时)。例如。

我无法更改 HTML 结构，因为它是由框架自动生成的，但我可以更改 CSS 代码，甚至可以在 html 中添加一些类。

<div class="input-group">
    <span>
        <span class="inline">&nbsp;</span>
        <label class="block">Pets</label>
        <span class="inline">
            <select>
                <option value="&nbsp;">&nbsp;</option>
                <option value="Dog">Dog</option>
                <option value="Cat">Cat</option>
            </select>
        </span>
        <span class="inline">*</span>
        <span class="inline">
            <span >&nbsp;</span>
        </span>
    </span>
    <span>
        <span>
            <button>
                <span>Configure</span>
            </button>
        </span>
        <span >*</span>
        <span >
            <span >&nbsp;</span>
        </span>
    </span>
</div>

我在元素检查方面尝试了很多东西，尤其是带有表格和表格单元格值的显示属性，但我无法获得同一行中的元素和自动宽度调整大小的选择。我也无法将第一个跨度与同一行中的选择对齐...

.input-group {
    display: table;
    width:100%;
    background-color: yellow;
}
.inline
{
    display: table-cell;
    height: 33px;
}
.block{
    display: block;
}

你能帮我一把吗？ 多谢! fiddle :http://jsfiddle.net/gal007/29qstLq8/1/

Answer 1

这是迄今为止我得到的最接近的东西。我的代码使用 position: relative; 和 position: absolute; 来实现接近你正在寻找的东西。

http://jsfiddle.net/29qstLq8/14/