skip to Main Content

I want to position my radio buttons and checkboxes inline position I’ve used this css code but it didn’t work

css

.checkbox-inline, .radio-inline {
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 0;
    padding-left: 20px;
    position: relative;
    vertical-align: middle;

}
input[type=radio] {
     margin-left: -20px;
    position: absolute;
}

html

<div>
 <label> <b>carburant: </b><span>(*)</span></label>
  <label class ='radio-inline'><input type='radio' name='carburant' value=1 checked> AA</label>
<label><input class ='radio-inline' type='radio' name='carburant' value=2> BB</label>
<label><input class ='radio-inline' type='radio' name='carburant' value=3> CC</label>
<label><input class ='radio-inline' type='radio' name='carburant' value=4> DD</label>
</div><br />




<div>
     <label> <b>city: </b><span>(*)</span></label>
      <label class ='checkbox-inline'><input type='checkbox' name='carburant' value=1 checked> AA</label>
    <label><input class ='checkbox-inline' type='checkbox' name='carburant' value=2> BB</label>
    <label><input class ='checkbox-inline' type='checkbox' name='carburant' value=3> CC</label>
    <label><input class ='checkbox-inline' type='checkbox' name='carburant' value=4> DD</label>
    </div><br />

I am not using twitter bootstrap ,I am working with html5.
I want to display my buttons on the same line.

Thank you.

2

Answers


  1. The issue arises from CSS properties assigned to input[type=radio] tag, remove them all, and have your check boxes sitting properly next to each other… here’s the link;

    Radio Inlins

    Login or Signup to reply.
  2. You question not very clear, but I think you want inline your radio button, I hope below solution will helps you.

    .checkbox-inline, .radio-inline {
        cursor: pointer;   
        font-weight: 400;
        margin-bottom: 0;
        padding-left: 20px;
    }
    <div >
     <label> <b>carburant: </b><span>(*)</span></label>
      <label class ='radio-inline'><input type='radio' name='carburant' value=1 checked> AA</label>
    <label><input class ='radio-inline' type='radio' name='carburant' value=2> BB</label>
    <label><input class ='radio-inline' type='radio' name='carburant' value=3> CC</label>
    <label><input class ='radio-inline' type='radio' name='carburant' value=4> DD</label>
    </div><br />
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search