ASP.NET CheckBoxList ListItem not wrapping in one line

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

As you can see in this picture: https://i.sstatic.net/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;
}

I've had the same problem. The text part of the checkbox control is rendered as a label when the RepeatLayout is set as Flow.

So, it happens because of bootstrap, which sets all labels to display as block. To solve this whitout causing any problems to the rest of the app, I've wrapped my checkbox into a div or p with a specific class, and set into my css:

.pCheck label {
    display: inline-block;
    margin-left: 5px;
}