css - 为内联单选按钮组创建重置按钮

Question

我正在尝试为内联单选按钮组创建一个重置按钮。我对结果不满意，因为最后一个选项和按钮之间没有空格。

<div>
    <label class='radio-inline'>
        <input data-bind="checked: sex" type="radio" name="inlineRadioOptionssex" id="inlineRadiosex1" value="1"> M
    </label>
    <label class='radio-inline'>
        <input data-bind="checked: sex" type="radio" name="inlineRadioOptionssex" id="inlineRadiosex2" value="2"> F
    </label>
    <label class='radio-inline'>
        <input data-bind="checked: sex" type="radio" name="inlineRadioOptionssex" id="inlineRadiosex3" value="3"> O
    </label>
    <button data-bind="click: resetsex" class="btn btn-default btn-xs btn-round"><span class="glyphicon glyphicon-remove"></span></button>
</div>

结果如下:

在最后一个选项和按钮之间插入一些空格的最干净的方法是什么？

Answer 1

这里是 fiddle演示 margin-left

的使用

button.reset-btn{
  margin-left:20px;
}