Сделать радиокнопки заменены изображениями в той же строке

Question

.form-group { 
    height: 16px; 
} 

.form-group > input { 
    opacity: 0; 
    position: absolute; 
} 

.form-group > input + label { 
    background-image: url('Empty_Star.png'); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    padding: 0 0 0 0; 
    display:block; 
    height: 16px; 
    vertical-align: middle; 
    line-height:16px; 
} 
.form-group > input[type=radio]:checked + label { 
    background-position: 0 0; 
} 

<form name="rating" class="form-group"> 
     <input id="radio1" type="radio" name="rate" value="1"/> 
     <label for="radio1"></label> 
     <input id="radio2" type="radio" name="rate" value="2"/> 
     <label for="radio2"></label> 
     <input id="radio3" type="radio" name="rate" value="3"/> 
     <label for="radio3"></label> 
     <input id="radio4" type="radio" name="rate" value="4"/> 
     <label for="radio4"></label> 
     <input id="radio5" type="radio" name="rate" value="5"/> 
     <label for="radio5"></label> 
</form> 

Мне не нужны этикетки, но КАЖДЫЙ учебник о том, как заменить переключатели, включил их и не включил их, не работал. Поэтому любая помощь с этим тоже ценится. Но моя главная проблема заключается в том, чтобы каждый из пяти звезд (изображений) бок о бок друг с другом. Независимо от того, что я делаю, это не работает. Я пробовал играть с опциями отображения и читать другие уроки. Ничто не работает должным образом. Спасибо!

Answer 1

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.form-group { 
 
    /* height: 16px;*/ 
 
} 
 
.form-group ul{} 
 
.form-group ul li{  
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
    vertical-align: middle; 
 
} 
 

 
.form-group input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.form-group input[type="radio"] + label { 
 
    background-image: url('http://www.iconsearch.ru/uploads/icons/uidesignicons/16x16/star_full.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 0; 
 
    padding: 0 0 0 0; 
 
    display:block; 
 
    height: 16px; 
 
    vertical-align: middle; 
 
    line-height:16px; 
 
} 
 
.form-group input[type=radio]:checked + label { 
 
    /*background-position: 0 0;*/ 
 
    background: url(http://www.iconsearch.ru/ajax/download.php?icon_id=14617&size=1&format=ico); 
 
} 
 
label{ 
 
    display: block; 
 
    width: 16px; 
 
    height: 16px; 
 
}

<form name="rating" class="form-group"> 
 
     <ul> 
 
     <li><input id="radio1" type="radio" name="rate1" value="1"/> 
 
     <label for="radio1"></label> 
 
     <li><input id="radio2" type="radio" name="rate2" value="2"/> 
 
     <label for="radio2"></label> 
 
     <li><input id="radio3" type="radio" name="rate3" value="3"/> 
 
     <label for="radio3"></label> 
 
     <li><input id="radio4" type="radio" name="rate4" value="4"/> 
 
     <label for="radio4"></label> 
 
     <li><input id="radio5" type="radio" name="rate5" value="5"/> 
 
     <label for="radio5"></label> 
 
    </ul> 
 
</form>