3

タイトルの形式としてラベルを使用して選択リストを作成する Web サービスからコンテンツを取得しています。ルールは、選択リストが整列して互いに重なり合う必要があり、ラベルが占有しない残りの画面領域を占める必要があるということです。

テーブルを使用して作成することでこれを行うことができますが、可能であれば、より純粋な CSS ルートを探しています。

display: table、と div の組み合わせを使用しようとしましたが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 に答える