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
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
You question not very clear, but I think you want inline your radio button, I hope below solution will helps you.