css - 使单选按钮替换为同一行中的图像

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>