c# - not wrap ListItem Text in Horizontal CheckBoxList -

i have dynamic checkboxlist :

  <%@ control language="c#" autoeventwireup="true" codefile="projectorigin.ascx.cs" inherits="usercontrol_pem_aspx_projectorigin" %> <div style="display:block;"> <asp:checkboxlist id="checkboxlist1" runat="server" repeatdirection="horizontal"  > </asp:checkboxlist></div> 

and add listitems in function

private void chklistboxinit()     {         if (checkboxlist1.items.count != 0) return;         checkboxlist1.items.clear();          desprovider p = new desprovider();         list<tbldes> list = p.getbydesgrpid(grpid).orderby(a => a.desid).tolist();         listitem li;         foreach (var l in list)         {             li = new listitem(l.desf, l.val);         checkboxlist1.repeatlayout = repeatlayout.flow;             checkboxlist1.items.add(li);         }      } 

the html generated is:

<div style="display:block;">    <span id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1">     <input id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_0" type="checkbox" name="ctl00$maincontent$formview1$projectorigin1$checkboxlist1$0" />     <label for="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_0">بهبود فرآیند کار</label>      <input id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_1" type="checkbox" name="ctl00$maincontent$formview1$projectorigin1$checkboxlist1$1" />     <label for="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_1">بهبود محیط کار</label>      <input id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_2" type="checkbox" name="ctl00$maincontent$formview1$projectorigin1$checkboxlist1$2" />     <label for="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_2">ایمنی و بهداشت</label>      <input id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_3" type="checkbox" name="ctl00$maincontent$formview1$projectorigin1$checkboxlist1$3" />     <label for="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_3">رفاهی</label>      <input id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_4" type="checkbox" name="ctl00$maincontent$formview1$projectorigin1$checkboxlist1$4" />     <label for="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_4">فروش و مشتریان</label>      <input id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_5" type="checkbox" name="ctl00$maincontent$formview1$projectorigin1$checkboxlist1$5" />     <label for="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_5">کاهش هزینه ها</label>      <input id="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_6" type="checkbox" name="ctl00$maincontent$formview1$projectorigin1$checkboxlist1$6" />     <label for="ctl00_maincontent_formview1_projectorigin1_checkboxlist1_6">سایر موارد</label>   </span> </div> 

how can avoid listitem text wrapping @ end off line , keep checkbox , text together?

make sure <label> elements have css setting display: block;. should ensure label text stays on same line.

you can see in this jfiddle. example labels have display:inline; shows same wrapping seeing. example labels have display:block; shows text staying on same line.

update after html posted in question:

because checkboxlist producing <input> separate each related <label>, there no easy way can see keep them in flow, , guarantee labels not wrap and labels , checkboxes stay on same row. set label, input { float: right; display: block; } in css, allow labels on separate rows related inputs.

best solution can see not use checkboxlist. instead, use repeater, following layout:

<asp:repeater id="checkboxes" runat="server">   <itemtemplate>     <div class="checkboxitem">       <asp:checkbox runat=server />     </div>   </itemtemplate> </asp:repeater> 

you data bind repeater in similar way, populating value of checkbox in each _itemdatabound event.

enclosing each checkbox in <div> , adding label, .checkboxitem { float: left; } in css should force checkboxes , labels stay on same line, per the technique showed in answer.