複選框在一行

Question

我有一個帶2個複選框的網格。但它顯示在兩行，我需要在一行顯示（Ckeckboxes +標籤）。 我使用CSS Bootstrap。 IN複選框中，我設置爲內聯顯示。

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

第二個div與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> 

如果你想顯示文本和複選框在一個單一的線，你可以單獨刪除td從CheckBox文字和顯示。

<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

您必須將顯示設置爲阻止。你也必須將寬度和高度設置爲最後的td。 例如：

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

Answer 3

，你也可以在w3schools

我可以重現你的問題，請使用white-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 4

嘗試CSS的DIV

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

Answer 5

您必須設置width到最後一列，否則float:left將無法​​正常工作。首先嚐試更大的width，然後變小，直到找到理想的設置。祝你好運！

Answer 6

有更簡單更清潔的解決方案。

添加的CssClass（有道）

所有你需要做的就是添加一個CSS類要呈現內嵌每asp:CheckBox。如果你這樣做，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的