-1

これはかなり簡単な質問のようですが、ここで（またはGoogle経由で）具体的な答えを見つけることができませんでした。

オーバーレイされたdiv内にAPS.NetがありますCheckBoxList（ドロップダウン選択リストをエミュレートします）。

デフォルトでは、CheckBoxLIst用に生成されたHTMLは次のようになります。

<table id="MainContent_DropDownCheckBoxList4_checkBoxList">
    <tbody><tr>
        <td><input type="checkbox" value="ALL" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$0" id="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdownlabel">All</label></td>
    </tr><tr>
        <td><input type="checkbox" value="0" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$1" id="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdownlabel">Item 0</label></td>
    </tr><tr>
        <td><input type="checkbox" value="1" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$2" id="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdownlabel">Item 1</label></td>
    </tr><tr>
        <td><input type="checkbox" value="2" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$3" id="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdownlabel">Item 2</label></td>
    </tr><tr>
        <td><input type="checkbox" value="3" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$4" id="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdownlabel">Item 3</label></td>
    </tr>
</tbody></table>

問題は、個々のラベルがその中のテキストの幅だけであるということですが、行全体を選択できるようにしたいのです。私のコントロール/テーブルの幅は固定されているので、長さなどを計算する必要はありません。

私が見たすべての解決策は、またはバリエーションを使用することを提案してdisplay: blockいますが、それにより、テキストがチェックボックスの下の行に表示され、90％の幅に設定されていても、すべてのブラウザで機能するわけではありません。

ラベルに行の残りの部分を占めるようにするにはどうすればよいですか？JQueryの回答は受け入れられますが（コントロールはすでにかなりJQueryされているため、さらに望ましいです）、すべてのブラウザーで機能するソリューションを投稿してください。HTMLから、 JQueryを介しdropdowncheckてチェックボックスにクラスを追加dropdownlabelし、ラベルにクラスを追加していることがわかります（特定のCSSの回答を得るのに役立つ場合）。

簡単な解決策（Henrikからの回答に基づく）：

.dropdowncheck
{
    float: left;

.dropdownlabel
{
    display: block;
}

チェックボックスとラベルにクラスが割り当てられている限り（つまり、JQueryを介して）、これは正常に機能します。

4

2 に答える 2

2

ラベルを display:block に設定し、チェックボックスを float:left に設定するのはどうですか?

テキストが希望どおりに水平方向に配置されていない場合は、チェックボックスで高さを設定し、ラベルの行の高さを同じにします。

于 2012-07-08T12:16:15.523 に答える
1

純粋な jQuery でも、探している結果を得ることができます。これからインスピレーションを得て、この例を作成 しました。このアプローチの後、ラベルタグの機能が非推奨になったため、ラベルタグを削除する必要がありました。

$('td').click(function(event){

if (event.target.type !== 'checkbox') {
  $(':checkbox', this).trigger('click');

}

})​

いくつかのCSSでスパイスを加えます

td{
width: 200px;
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}​
于 2012-07-08T12:56:32.980 に答える