3

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

我可以通过使用表格创建它们来做到这一点，但如果可能的话，我正在寻找更纯粹的 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>

4

1 回答 1

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>

但是，它涉及将标签列设置为静态宽度，因此如果您需要该列拉伸或收缩，它可能不适合您。不过，标签文本将自动换行到下一行。

于 2012-10-03T21:26:41.300 回答