2 HTML checkboxs with labels to the right on the same line

Questions

I am trying to create an HTML display that has 2 checkboxes each with a label to the right, and both on the same line. I also want a heading on the same line eg:

Title, checkbox 1, label 1, checkbox 2, label 2.

All on the same line. So far I have not been able to create this.

I have been able to get a single checkbox and label on the same line, but when I try and add the heading or the second checkbox, it alters the formatting and puts it all on separate lines.

Below is the closest I have come to achieving what I want, but the labels appear above the check boxes, rather than on the same line.

<span class="txtSmallGrey fl" style="display:block; width:200px; margin:15px; margin-top:30px"><%= oUtils.GetContentText("Collect_Config_Expense_return") %></span>
            <span style="margin-top:30px">
            <label class="txtSmallGrey fl" style="margin:15px"><input type="checkbox" onclick="fnOnCheck(ER_Enable)" id="ER_Enable" class="fl" style="width:15px; margin-top:30px"/><%= oUtils.GetContentText("Collect_Config_Enable") %></label></span>
            <label class="txtSmallGrey fl" style="margin:15px"><input type="checkbox" onclick="fnOnCheck(ER_Surpress)" id="ER_Surpress" class="fl" style="width:15px; margin-top:30px" /><%= oUtils.GetContentText("Collect_Config_Surpress") %></label></span>

I have tried many different combinations, changing the margins, using spans, divs, labels and anything else I can think of. I have also read every post related to the mater I can find, but nothing is giving me a clear explanation of how to achieve my aim.

I know I am missing something in my understanding of HTML, but am not sure how to find the information I need in order to undersatnd how to solve this problem.

Answers

My solution will also work when the text is too big in one of the elements. Just remove the display:block for the title and wrap all the elements in a div

<div class = "outer">
//rest of ur code
</div>

Its CSS:

.outer{
    width:100%;
    overflow:auto;
    white-space:nowrap;
}

http://jsfiddle.net/Lcf7jh18/1/ http://jsfiddle.net/Lcf7jh18/1/

Source

License : cc by-sa 3.0

http://stackoverflow.com/questions/28581174/2-html-checkboxs-with-labels-to-the-right-on-the-same-line

Related