user4756836 user4756836 - 3 months ago 8
CSS Question

Radio button's appearing one over another

I have custom radio buttons on my application. My issue is that currently the radio buttons display fine individually. When I try to have two of them in one line... They appear over each other instead of beside each other. I can't change my HTML and can only mess with the CSS. Any help will be appreciated. I was thinking it was due to the width of each label but giving it a low width had the same result.

HTML:

<label class="radio">
<input type="radio">
<span class="custom"><span>One</span></span>
</label>


CSS:

* {
box-sizing: border-box;
}

input[type="radio"] {
display: none;
cursor: pointer;
}

label {
cursor: pointer;
}

.radio span.custom > span {
margin-left: 22px;
}

.radio .custom {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
display: inline-block;
height: 20px;
left: 0;
position: absolute;
top: 0;
width: 20px;
}

.radio input:checked + .custom:after {
background-color: #0574ac;
border-radius: 100%;
border: 3px solid #fff;
content: "";
display: block;
height: 12px;
position: absolute;
top: 0;
width: 12px;
}

.radio input + .custom {
border-radius: 100%;
}

.checkbox input:checked .custom {
background-color: blue;
border-color: blue;
}


JSFiddle Demo

Answer

just edit label class so (just example) :

label {
  cursor: pointer;
  display:inline-block;
  width: 50px;
  position:relative;
}