html - Asp 复选框列表的对齐问题

Question

我有一个 asp.net 网络表单页面，但我的复选框列表无法正常工作 -
复选框列表中的元素始终垂直对齐，但我需要在 css 中使其水平对齐。
我理解现场显示的问题: block ；
但是我需要这个来格式化所有的 div，当我为复选框添加 css - check-field 时，它不会改变。
如何使复选框列表元素水平对齐？现在我有了这个:

但是我想水平对齐
我的代码:

<div id="infodif" runat="server" visible="true" class="form-style-2">
  <div class="form-style-2-heading">
    <asp:Label ID="Label6" runat="server" />
  </div>
  <label><span>First <span class="required">*</span></span><asp:TextBox ID="faminfobox" class="input-field"  runat="server"  onkeypress="return isAlphaNumericKey(event);" /></label>
  <label><span>Second <span class="required">*</span></span><asp:TextBox ID="iminfobox" class="input-field" runat="server"  onkeypress="return isAlphaNumericKey(event);" /></label>
  <label><span>Third <span class="required">*</span></span><asp:TextBox ID="otinfobox" class="input-field" runat="server" onkeypress="return isAlphaNumericKey(event);" /></label>
  <label><span>Four <span class="required">*</span></span><asp:TextBox ID="OGRNinfobox" CssClass="input-field" class="input-field" runat="server" disabled="true" Enabled="false" onkeypress="return allowOnlyNumber(event);" /></label>
  <label><span>Five <span class="required">*</span></span><asp:TextBox ID="TabNominfobox" CssClass="input-field" class="input-field" runat="server" Enabled="false" onkeypress="return allowOnlyNumber(event);" /></label>
  <label><span>CHECK</span><asp:CheckBoxList ID="CheckBoxList1" runat="server" DataValueField="idGK" CssClass="check-field" class="check-field" DataTextField="ShortName" SelectMethod="GetFinance" RepeatLayout="Flow" RepeatDirection="Horizontal"/></label>
  <label><span>Seven <span class="required">*</span></span><asp:TextBox ID="commentbox" CssClass="textarea-field" class="textarea-field" Text="Введите причину изменения" Enabled="false" runat="server"  Height="21px" /></label>
  <label><span>Eight</span><asp:DropDownList ID="sexinfodrop" runat="server" class="select-field" SelectMethod="GetSex" DataValueField="w" DataTextField="pol" EnableViewState="true" /></label>


  <label><span>&nbsp;</span><input type="submit" value="Submit" /></label>
  <label><span>&nbsp;</span><asp:Button ID="SaveBtn" Text="Сохранить" runat="server" OnClick="SaveBtn_Click" Visible="true" /><asp:Button ID="ChangeReqAf" Text="Сохранить Изменения" runat="server" OnClick="ChangeReqAf_Click" Visible="false" /></label>

</div>

我的CSS:

  .form-style-2{
    max-width: 800px;
    /*display: flexbox;*/
    padding: 20px 12px 10px 20px;
    font: 13px Arial, Helvetica, sans-serif;
}
.form-style-2-heading{
    font-weight: bold;
    font-style: italic;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    font-size: 15px;
    padding-bottom: 3px;
}
.form-style-2 label{
    display:block;
    margin: 0px 0px 15px 0px;
  
}
.form-style-2 label >  span{
    width: 300px;
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}
.form-style-2 span.required{
    color:red;
}

.form-style-2 input.input-field{
    width: 48%;
    
}


.form-style-2 .check-field {
   display: table-row;
  float: left;
 
} 

更新:
1.我更新了CSS代码。

1. 现在我有

Answer 1

尝试使用:

RepeatLayout="Table" 和 RepeatDirection="Horizo​​ntal"