Question

我从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>

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>

它涉及将标签列设置为静态宽度，因此如果您需要拉伸或缩小该列，它可能无法解决问题。但是，标签文本将包装到下一行，没有任何问题。

尝试使用动态内容创建无表格控件

1 个答案: