添加CssClass（正确方式）

Question

enter image description here 我有一个带有2个复选框的网格。但是它显示在2行中，我需要在一行中显示（Ckeckboxes + Label）。我使用CSS Bootstrap。在Checkbox中，我设置为内联显示。

我的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配置为仅显示一行？我在其他两页中遇到此问题。

附印： enter image description here

我的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 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内呈现label + span。然后，对于该课程，您需要设置white-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元素的CheckBoxes使用起来非常令人沮丧，因为它们打破了用户点击标题的自然习惯，而不是微小的小方块。

保持简单！
〜Wiktor的

Answer 3

您必须将显示设置为阻止。您还必须将宽度和高度设置为上一个td。例如：

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

Answer 4

您还可以使用white-space: no wrap检查w3schools

我可以重现您的问题，您的标签可能会继承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 5

尝试CSS你的div

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

Answer 6

您必须将width设置为最后一列，否则float:left将无效。先尝试使用较大的width s然后再缩小，直到找到理想的设置。祝你好运！

复选框在一行中

6 个答案:

添加CssClass（正确方式）

示例代码段