CODEWITHSUNDEEP
htmlcss
user3392135
user3392135

Reputation: 447

How to align the checkbox and label in same line in html?

Within li tags, I am placing a checkbox and label input.

If label text is larger than label, the text goes to the next line.

I wrapped the label text but it's not aligning the checkbox and label in the same line if label text is too long.

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label style="word-wrap:break-word">testdata</label>
</li>

Thanks,

Upvotes: 44

Views: 201700

Answers (14)

Thotsawat J.
Thotsawat J.

Reputation: 136

You can use CSS display: table and table-cell properties to achieve a similar effect.

<li>
    <div style="display: table;">
        <div style="display: table-cell;">
            <input id="checkid" type="checkbox" value="test" />
        </div>
        <div style="display: table-cell; word-wrap: break-word; padding-left: 8px;">testdata with a very long label</div>
    </div>
</li>

Upvotes: 0

Noncedo
Noncedo

Reputation: 1

This code worked for me

[type="checkbox"] { vertical-align: middle; word-wrap: break-word;margin-left:1% }

But I had to add margin-left:1% to ensure the checkbox aligns with my other form controls.

Upvotes: 0

Piyush Marvaniya
Piyush Marvaniya

Reputation: 2542

Please try it

<li>
<input id="checkid" type="checkbox" value="test">
<label>testdata</label>
</li>

li input {float: left;}
li label {word-wrap: break-word; line-height: 16px; float: left;}

Upvotes: 0

DENZ
DENZ

Reputation: 11

This worked for me

CSS

input[type="checkbox"] {
    display: inline-block;
    width: auto;
  }

HTML

<div class="checkbox">
    <input type="checkbox">
    <label>test data</label>
</div>

Upvotes: 1

THE_GREAT_MARKER
THE_GREAT_MARKER

Reputation: 544

I had the same problem, but non of the asweres worked for me. I am using bootstap and the following css code helped me:

label {
 display: contents!important;
}

Upvotes: 6

EscapeNetscape
EscapeNetscape

Reputation: 2939

Another approach here:

.checkbox-wrapper {
  white-space: nowrap
}
.checkbox {
  vertical-align: top;
  display:inline-block
}
.checkbox-label {
  white-space: normal
  display:inline-block
}

<div class="text-left checkbox-wrapper">
  <input type="checkbox" id="terms" class="checkbox">
  <label class="checkbox-label" for="terms">I accept whatever you want!</label>
</div>

Upvotes: 5

user14218683
user14218683

Reputation: 181

None of these suggestions above worked for me as-is. I had to use the following to center a checkbox with the label text displayed to the right of the box:

<style>
.checkboxes {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  word-wrap: break-word;
}
</style>

<label for="checkbox1" class="checkboxes"><input type="checkbox" id="checkbox1" name="checked" value="yes" class="checkboxes"/>
Check the box.</label>

Upvotes: 10

Mabu
Mabu

Reputation: 184

If you are using bootstrap wrap your label and input with a div of a "checkbox" or "checkbox-inline" class.

<li>
    <div class="checkbox">
        <label><input type="checkbox" value="">Option 1</label>
    </div>
</li>

Reference: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Upvotes: 2

faizan
faizan

Reputation: 1

Use this in your li style.

style="text-align-last: left;"

Upvotes: -1

Sai
Sai

Reputation: 391

Use below css to align Label with Checkbox

    .chkbox label
            {
                position: relative;
                top: -2px;
            }

<div class="chkbox">
<asp:CheckBox ID="Ckbox" runat="server" Text="Check Box Alignment"/>
</div>

Upvotes: 2

Dibyendu Mitra Roy
Dibyendu Mitra Roy

Reputation: 1665

If you are using bootstrap then use this class in the holding div 

radio-inline

Example:

<label for="active" class="col-md-4 control-label">Active</label>
<div class="col-md-6 radio-inline">
    <input type="checkbox" name="active" value="1">
<div>

Here the label Active and the checkbox will appear to be aligned.

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You should use <label for=""> for the checkboxes or radios, and to align checkboxes vertical-align is enough

Try changing your markup to this 

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label for="checkid">testdata</label>
</li>

<li>
    <input id="checkid2" type="checkbox" value="test" />
    <label for="checkid2">testdata 2</label>
</li>

And set CSS like

input[type="checkbox"]
{
    vertical-align:middle;
}

In case of long text

label,input{
    display: inline-block;
    vertical-align: middle;
}

Side note: In label, value of for must be the id of checkbox.

Fiddle

Updated Fiddle

Upvotes: 25

Ijas Ameenudeen
Ijas Ameenudeen

Reputation: 9259

Wrap the checkbox with the label and check this

HTML:

<li>
     <label for="checkid"  style="word-wrap:break-word">
        <input id="checkid"  type="checkbox" value="test" />testdata
     </label>
</li>

CSS:

[type="checkbox"]
{
    vertical-align:middle;
}

http://jsfiddle.net/pKD9K/1/

Upvotes: 52

Bob
Bob

Reputation: 848

Just place a div around the input and label...

    <li>
      <div>
        <input id="checkid"  type="checkbox" value="test" />
      </div>
      <div>
        <label  style="word-wrap:break-word">testdata</label>
      </div>
    </li>

Upvotes: 0

Related Questions