How to make ASP CheckBoxList labels stay on same line as checkbox

Question

This may be a common problem but I'm struggling to find a solution that will fix it

I have a modal popup I am displaying with jQuery, this popup contains a list of Checkboxes and a Button, the code looks like:

<div id="dialog" title="Notify Users" >
    <div style="width:100%; height:500px; overflow:auto;">
        <asp:CheckBoxList ID="chkNotify" 
            runat="server" 
            CssClass="checkboxlist_nowrap"
            RepeatLayout="Table" 
            /> 
    </div>
    <asp:Button ID="btnSaveNotifications"
        runat="server" 
        Text="Ok"
        />
</div>

The popup displays correctly however the labels for each checkbox are on the line below the checkbox. I cant seem to figure out why this happens, at first I assumed that the div containing the CheckBoxList was simply too small so I gave each div a fixed width, but that didn't help anything.

I have also tried applying this CSS

.checkboxlist_nowrap tr td label
{
    white-space:nowrap;
    overflow:hidden;
    width:100%;
}

It didnt help but im unsure about if the stylesheet actually was used even though I have:

  <link href="../css/HelpDesk.css" rel="stylesheet" type="text/css" />

in my head tags.

Can anyone suggest anything else I can try?

Thanks

UPDATE: Here is my Jquery:

 $(function () {
    $("#dialog").dialog({
       autoOpen: false,
       show: "blind",
       width: 400, 

       hide: "explode"
    });

And here is how I populate the CheckBoxList:

 Private Sub populateCheckBoxList()

      Dim notificationList As DataTable
      notificationList = dbGetNotificationsList(1)

      For Each dr As DataRow In notificationList.Rows

         Dim li As New ListItem
         li.Text = dr("FullName")
         li.Value = dr("ID")

         If (dr("Checked") = 1) Then
            li.Selected = True
         Else
            li.Selected = False
         End If
         chkNotify.Items.Add(li)

      Next

   End Sub

I have tried moving the CheckBoxList to just inside the form tag so that no other styles can be applied and nothing should affect it however I still get the same issue.

Answer 1

For me none of the above solutions worked and so i looked up the exact HTML rendered and found that the label had the display property set to block. Changing it to inline worked:

.checkboxlist_nowrap label
{
     display:inline;
}