css - 尝试创建具有动态内容的无表控件

Question

我正在从一个网络服务中提取一些内容，该网络服务创建带有标签作为标题形式的选择列表。规则是选择列表必须排成一行并堆叠在一起，并占据标签未占据的其余屏幕空间。

我可以通过用表格创建它们来做到这一点，但如果可能的话，我正在寻找更纯的 CSS 路线。

尝试将 div 与 display: table、display: table-row、display: table-cell 组合使用，但我做不到无法使堆叠效果正常工作。

这就是我想要的效果:

.horizontalFill {
    width: 100%;                
}

.noWrap {
    white-space: nowrap;        
}

<table class="horizontalFill">
    <tr>
        <td class="noWrap">
            <label>some dynamic text</label>
        </td>
        
        <td class="horizontalFill">
            <select class="horizontalFill">
            </select>
        </td>
    </tr>        
    
    <tr>
        <td class="noWrap">
            <label>
                other dynamic text here
            </label>
        </td>
        
        <td class="horizontalFill">
           <select class="horizontalFill"></select>
        </td>
    </tr>
</table>

Answer 1

您可以尝试类似的操作:

label {
    display: block;
    overflow: hidden;
    padding-bottom: 5px;
}

label .label {
    display: block;
    float: left;
    width: 150px;
}

label .input {
    display: block;
    margin-left: 160px;
}

label select {
    width: 100%;
}

<label class="row">
    <span class="label">Label name one</span>
    <span class="input">
        <select>
            <option>Select item</option>
        </select>
    </span>
</label>

<label class="row">
    <span class="label">Label name two</span>
    <span class="input">
        <select>
            <option>Select item</option>
        </select>
    </span>
</label>

<label class="row">
    <span class="label">Label name three</span>
    <span class="input">
        <select>
            <option>Select item</option>
        </select>
    </span>
</label>

不过，它涉及将标签列设置为静态宽度，因此如果您需要拉伸(stretch)或收缩该列，它可能不适合您。不过，标签文本将毫无问题地换行到下一行。