c# - 一行中的复选框

Question

我有一个带有 2 个复选框的网格。但它显示在 2 行中，我需要显示在一行中(Ckeckboxes + Label)。我使用 CSS Bootstrap。在复选框中，我设置为内联显示。

我的 CSS。

input[type="checkbox"] {  cursor: pointer;  display: inline;}

我的页面:

<div id="Div1" width="auto" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" GridLines="None"
        CssClass="table table-bordered table-striped" Width="100%">
        <Columns>
            <asp:BoundField DataField="idTickets" HeaderText="ID" />
            <asp:BoundField DataField="User" HeaderText="User" />
            <asp:BoundField DataField="RequestDate" HeaderText="Request Date" DataFormatString="{0:d}" />
            <asp:BoundField DataField="BusinessJustification" HeaderText="Business Justification" />
            <asp:BoundField DataField="AccessType" HeaderText="Group Access" />
            <asp:BoundField DataField="sub_folder_path" HeaderText="Folder Path" />
            <asp:BoundField DataField="ServerName" HeaderText="Server Name" />
            <asp:TemplateField HeaderText="Approved/Denied">
                <ItemTemplate>
                    <asp:HiddenField ID="UserValue" runat="server" Value='<%# Bind("User") %>' />
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Approved" OnCheckedChanged="CheckBox1_ChangeCheck"
                        AutoPostBack="true" />
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Denied" OnCheckedChanged="CheckBox2_ChangeCheck"
                        AutoPostBack="true" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

如何配置此 CkechBox 以仅在一行中显示？我在其他 2 个页面中也有这个问题。

附打印:

我的 html:

<tr><td>
  <input type="hidden" name="GridView1$ctl02$UserValue" id="GridView1_UserValue_0" value="MXLozadaRa">
  <input id="GridView1_CheckBox1_0" type="checkbox" name="GridView1$ctl02$CheckBox1" onclick="javascript:setTimeout('__doPostBack(\'GridView1$ctl02$CheckBox1\',\'\')', 0)">
  <label for="GridView1_CheckBox1_0">Approved</label>
  <input id="GridView1_CheckBox2_0" type="checkbox" name="GridView1$ctl02$CheckBox2" onclick="javascript:setTimeout('__doPostBack(\'GridView1$ctl02$CheckBox2\',\'\')', 0)">
  <label for="GridView1_CheckBox2_0">Denied</label>
</td></tr>

带有 CkeckBox 的第二个 Div。

<div align="center" width="auto" id="DivCheckBox">
  <input id="ckbApprovalAll" type="checkbox" name="ckbApprovalAll" onclick="javascript:setTimeout('__doPostBack(\'ckbApprovalAll\',\'\')', 0)">
  <label for="ckbApprovalAll">Approved All</label>
  <input id="ckbDeniedAll" type="checkbox" name="ckbDeniedAll" onclick="javascript:setTimeout('__doPostBack(\'ckbDeniedAll\',\'\')', 0)">
  <label for="ckbDeniedAll">Denied All</label>
  <br>
  <br>
  <input type="submit" name="btnSend" value="Send" id="btnSend" class="btn" align="center">
</div>

Answer 1

最简单的方法是使用表格。这些天我避免使用表格。

在这种情况下，GridView 无论如何都会生成一个表格，所以这已经无关紧要了。

<asp:GridView ID="GridView1" runat="server" 
  AutoGenerateColumns="false" GridLines="None" Width="100%">
    <Columns>
        ...
        <asp:TemplateField HeaderText="Approved/Denied">
            <ItemTemplate>
                <table>
                    <tr>
                        <td><asp:CheckBox ID="CheckBox1" ... /></td>
                        <td><asp:CheckBox ID="CheckBox2" ... /></td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

如果想在一行中同时显示文本和复选框，可以将CheckBox中的文本去掉，在td中分别显示。

<table>
    <tr>
        <td><asp:CheckBox ID="CheckBox1" ... /></td>
        <td>Approved</td>
        <td><asp:CheckBox ID="CheckBox2" ... /></td>
        <td>Denied</td>
    </tr>
</table>

最后但同样重要的是，您可以在单独的模板字段中呈现每个复选框。与其他两种方法相比，我更喜欢这种方法。

<asp:GridView ID="GridView1" runat="server" ...>
    <Columns>
        <asp:TemplateField HeaderText="Approved">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" .../>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Denied">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox2" ... />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>