How do I properly align my checkbox's with their labels

Viewed 28

I'm using HTML to make some changes to a website. I was told to change the labeling of my checkbox but now it's cutting into the other checkbox, how do I fix this?

                                            <asp:CheckBox ID="crudAudit1" runat="server" TextAlign="Left" Text="<abbr title='Audit 1'>A1</abbr>" />
                                        </label>
                                    </span>
                                </div>
                                <div class="col-md-2 radioContainer">
                                    <span style="white-space: nowrap;">
                                        <label class="lblAudit2" id="lblAudit2" runat="server">
                                            <asp:CheckBox ID="crudAudit2" runat="server" TextAlign="Left" Text="<abbr title='Audit 2'>A2</abbr>" />
                                        </label>
                                    </span>
                                </div>
                                <div class="col-md-2 radioContainer">
                                    <span style="white-space: nowrap;">
                                        <label class="lblDispatched" id="lblDispatched" runat="server">
                                            <asp:CheckBox ID="crudisDispatched" runat="server" TextAlign="Left" Text="<abbr title='Disptached'>DIS</abbr>" />
                                        </label>
                                    </span>
                                </div>
                                <div class="col-md-2 radioContainer">
                                    <span style="white-space: nowrap;">
                                        <label class="lblScheduled" id="lblScheduled" runat="server">
                                            <asp:CheckBox ID="crudisScheduled" runat="server" TextAlign="Left" Text="<abbr title='Scheduled'>DEL SCH</abbr>" />
                                        </label>
                                    </span>
                                </div>
                                <div class="col-md-2 radioContainer">
                                    <span>
                                        <label class="lblFinal" id="lblFinal" runat="server">
                                            <asp:CheckBox ID="crudisFinal" runat="server" TextAlign="Left" Text="<abbr title='Final'>FNL</abbr>" />
                                        </label>
                                    </span>
                                </div>

With this coding it looks like this on the website:

How the checkboxes look (DEL SCH are cutting into FNL)

1 Answers

You can try formatting it like this.

<div class="col-md-2 radioContainer">
   <span style="white-space: nowrap;">    
        <label class="lblFinal" id="lblFinal" runat="server">
             <input id="crudisFinal" type="checkbox">
             FNL
        </label>
   </span>
</div>
Related