自动化元素的组成

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>

我使用元素检查尝试了很多东西，特别是带有table和table-cell值的display属性，但是我无法获得同一行中的元素和自动调整宽度的select。我也不能将第一个跨度与同一行中的select对齐...

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

你可以帮我一把吗？ 非常感谢！ 小提琴：http://jsfiddle.net/gal007/29qstLq8/1/

Answer 1

这是我到目前为止最接近的事情。我的代码使用position: relative;和position: absolute;来获得与您正在寻找的内容接近的内容。

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

Answer 2

您应该使用display: inline-block而不是表格单元格。如果有足够的空间，这会将所有内容排成一行：

http://jsfiddle.net/ianhazzard/29qstLq8/8/

Answer 3

您是否尝试过浮动而不是使用table-cell？

.inline
{
    float:left;
    height: 33px;
}

http://jsfiddle.net/p7c97xg2/