MaterializeCSS 单选按钮内联间隙

Question

我正在尝试内联显示 MaterializeCSS 的单选按钮，但它们之间存在间隙。如有任何帮助，我们将不胜感激！

最小可重现代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<label>
    <input name="group1" type="radio" />
    <span>Yes</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span>No</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span>I don't know</span>
</label>

显示问题的图像：

Answer 1

我找到了解决方案，只需将 style="padding-left: 24px;" 设置为跨度即可。

代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">Yes</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">No</span>
</label>
<label>
    <input name="group1" type="radio" />
    <span style="padding-left: 24px;">I don't know</span>
</label>

MaterializeCSS 单选按钮内联间隙

MaterializeCSS Radio Buttons Inline Gap

html

css

radio-button

materialize