ASP.NET CheckBoxList ListItem not wrapping in one line

Question

I'm having some trouble when using the CheckBoxList control.

As you can see in this picture: http://i.stack.imgur.com/IkHXT.png,

each ListItem is showing in 2 separate lines instead of just one.

This is the code:

        <asp:CheckBoxList ID="cblTest" runat="server">
                <asp:ListItem Text="First item"></asp:ListItem>
                <asp:ListItem Text="Second item"></asp:ListItem>
        </asp:CheckBoxList>

For reference, I'm using the MetroUI-CSS (http://metroui.org.ua/) bootstrap.

EDIT: @Royi Namir: I tried to remove the tag using JQuery but it's not working. The tag is still there.

    <asp:CheckBoxList ID="cblTest" RepeatLayout="Flow" runat="server">
        <asp:ListItem Text="First item"></asp:ListItem>
        <asp:ListItem Text="Second item"></asp:ListItem>
    </asp:CheckBoxList>
    <script type="text/javascript">
        $('#cblTest').find('br').remove();
    </script>

EDIT 2: @Royi Namir: The problem is not the
tag because when I remove the second item the view source shows up without the tag but still in 2 separate lines.

<span id="body_cblTest"><input id="body_cblTest_0" type="checkbox" name="ctl00$body$cblTest$0" value="First item" /><label for="body_cblTest_0">First item</label></span>

EDIT 3: The problem was in the MetroUI-CSS bootstrap (metro-bootstrap.css). As @drigomed said, it was setting all labels to display as block.

.metro label {
  display: block; /*set this to inline-block*/
  margin: 5px 0;
}

Answer 1

Set this attribute to your CheckBoxList :

  <asp:CheckBoxList    RepeatLayout="Flow"  

It will cause your rendering to to render as table as you did.

The extra br is inserted via asp.net : http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeatlayout(v=vs.110).aspx

just use JS to remove it.