html - 如何将单选按钮对齐到我的文本的左侧？

Question

所以对于我的 raid 按钮，我希望它们与我的文本右侧对齐，就像上面的其他元素一样，但我不知道如何对齐。这是我的按钮的 fiddle 和代码。

<label>What kind of Ice Cream you like?</label>
<label><input type="radio" name="icecream" value="choco" id="radio">                     Chocolate</label><br>
<label><input type="radio" name="icecream" value="vanil" id="radio">Vanilla</label><br>
<label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="radio">Rocky Road</label><br>

https://jsfiddle.net/russiandobby/gfj1nper/4/

我尝试了很多方法，但我的单选按钮要么在文本下方结束，要么像这样弄乱了顺序。

Answer 1

尝试为每个 radio 使用一个 id，如下所示:

<div>
    <label for="chocolate">Chocolate</label>
    <input type="radio" name="icecream" value="choco" id="chocolate"> 
</div>

*编辑