c# - 一行中的复选框

Question

我有一个带有 2 个复选框的网格。但它显示在 2 行中，我需要在一行中显示（Ckeckboxes + Label）。我使用 CSS 引导程序。在复选框中，我设置为显示内联。

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

Answer 2

有更简单和更清洁的解决方案。

添加CssClass（正确的方式）

您需要做的就是为每个asp:CheckBox要内联渲染的 CSS 类添加一个。如果你这样做，ASP 将自动在你的类的父级内呈现input+ 。然后，对于该类，您需要设置阻止文本换行。labelspanwhite-space: nowrap;

.cb {
    white-space: nowrap;
}

<asp:CheckBox runat="server" Text="Approved" CssClass="cb" />

示例代码片段

.cb {
  white-space: nowrap;
}

/*/ Style for the sake of this Code Snippet /*/
.test-sample {
  border: dotted 1px;
  width: 50px;
}

<!--
  div.test-sample is not needed! I used it in this code snippet
  to prove that CheckBox label is not breaking to another line.
-->

<p>With <code>CssClass="cb"</code>:</p>
<div class="test-sample">
  <!-- <asp:CheckBox runat="server" ID="CheckBox1" Text="Approved" CssClass="cb" /> -->
  <span class="cb"><input id="CheckBox1" type="checkbox" /><label for="CheckBox1">Approved</label></span>
</div>

<p>Without <code>CssClass="cb"</code>:</p>
<div class="test-sample">
  <!-- <asp:CheckBox runat="server" ID="CheckBox2" Text="Approved" /> -->
  <input id="CheckBox2" type="checkbox" /><label for="CheckBox2">Approved</label>
</div>

我不建议使用表格来完成如此简单的任务。这太过分了，您将来可能会遇到问题，因为表的行为通常很难预测。

此外，尽量不要像此线程中的某些人推荐的那样单独呈现 CheckBox 及其标签，除非您提供适当的反馈并呈现适当的label元素。没有元素的复选框label使用起来非常令人沮丧，因为它们打破了用户点击标题的自然习惯，而不是非常小的小方块。

保持简单！
~维克托

Answer 3

您必须将 a 设置width为最后一列，否则float:left将不起作用。先尝试更大width的 s，然后再变小，直到找到理想的设置。祝你好运！

Answer 4

您必须将显示设置为阻止。此外，您必须将宽度和高度设置为最后一个 td。例如：

input,span
{
float:left
display:block;
}

Answer 5

你也可以在w3schoolswhite-space: no wrap上使用检查

我可以重现您的问题，您的标签可能会继承display:block。我修复它添加一个display: inline。

检查结果如何

<div style= "white-space: nowrap;">
        <input id="ckbApprovalAll" type="checkbox" name="ckbApprovalAll" onclick="javascript:setTimeout('__doPostBack(\'ckbApprovalAll\',\'\')', 0)">
        <label style="display: inline" for="ckbApprovalAll">Approved All</label>
</div>

Answer 6

试试 CSS 你的 div

.Div1 { white-space: nowrap; display:inline }