4

http://jsfiddle.net/Lijo/Fw3fz/に示すようなチェックボックスがあります。チェックボックスを水平に揃える必要があります。CSSを使用してそれらを整列させる方法は？

注：次のHTMLコードはASP.NETから生成されます。このHTMLコードを変更することはできません。

<table id="Checkboxlist1">
<tr>
    <td><input id="Checkboxlist1_0" type="checkbox" name="Checkboxlist1$0" value="red" /><label for="Checkboxlist1_0">Red</label></td>
</tr><tr>
    <td><input id="Checkboxlist1_1" type="checkbox" name="Checkboxlist1$1" value="blue" /><label for="Checkboxlist1_1">Blue</label></td>
</tr><tr>
    <td><input id="Checkboxlist1_2" type="checkbox" name="Checkboxlist1$2" value="green" /><label for="Checkboxlist1_2">Green</label></td>
</tr>
</table>
4

5 に答える 5

6

CheckBoxListを作成し、水平レイアウトプロパティを設定します。

<asp:CheckBoxList ID="cbl" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Red</asp:ListItem>
    <asp:ListItem >Blue</asp:ListItem>
    <asp:ListItem>Green</asp:ListItem>
</asp:CheckBoxList>

より詳しい情報：

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkboxlist.repeatdirection.aspx

于 2012-05-30T17:49:23.207 に答える
5

trsdisplayプロパティを変更する必要があります：http： //jsfiddle.net/Fw3fz/4/

​#Checkboxlist1 tr{
    display:inline-block;
    margin-right:20px;
}​

または、次を使用します：http float: //jsfiddle.net/Fw3fz/10/

#Checkboxlist1 tr{
    float:left;
    margin-right:20px;
}​

チェックボックスとラベルの間にスペースが必要な場合は、次のスニペットを追加します。

#Checkboxlist1 tr label{
    margin-left:5px;
}

ただし、テーブルの行をインラインで表示したり、フロートさせたりすることは非常にまれです。可能であれば、HTML構造を変更してください。

于 2012-05-30T17:49:15.540 に答える
1 
#Checkboxlist1 tr {
    float: left; // or diplay: inline-block
    margin-right: 15px;
}

#Checkboxlist1 td label {
    margin-left: 5px;
}

デモ

于 2012-05-30T17:51:39.493 に答える
1

ASP.NET Framework 4を使用している場合は、次のプロパティを確認できます。

CheckBoxList.RepeatDirectionプロパティ：

コントロールが垂直方向に表示されるか水平方向に表示されるかを示す値を取得または設定します。

CheckBoxList.RepeatLayoutプロパティ（テーブルレイアウトを削除するため）

テーブル要素、ul要素、ol要素、またはspan要素のいずれを使用してリストをレンダリングするかを指定する値を取得または設定します。

于 2012-05-30T17:55:06.350 に答える
0

それらを異なるセルに1行（tr）で配置するか、テーブルを失ってcssfloatを使用します。

于 2012-05-30T17:51:49.410 に答える