Question

我有一个问题。我正在尝试创建一个包含收音机，标签和可点击图标的单行，我希望所有这些元素都是内联的。我想将它设置为：

Radio Label Icon

按此顺序。我的代码HTML如下所示：

    <div class="wrapper class>
        <div class="radio" label="this is my label">
            <input type="radio" value="1" required>
            <i class="material-icons" ng-click="some-action">info_outline</i>
        </div>
    </div>

我试图将图标放在标签类之外，但它没有显示内联，我也试图在我的CSS代码中使用 display：inline; ，但无济于事。我试图将图标和标签分开，但我似乎无法让它工作。

非常感谢任何和所有帮助！

提前谢谢！

Answer 1

将div class =“radio”更改为span：

<div class="wrapper">
    <span class="radio" label="this is my label">
        <input type="radio" value="1" required>
        <i class="material-icons" ng-click="some-action">info_outline</i>
    </span>
</div>

https://jsfiddle.net/qq3nLwp3/

并改进了一些css：

div.wrapper input, div.wrapper i { {
    vertical-align: middle;
}

我在标签旁边有一个图标，当您单击该图标时，它不应该单击标签附加到的标签/单选按钮

1 个答案: