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

Question

I have an issue. I am trying to create a single line that contains a radio, a label, and a clickable icon and I want all of these elements to be inline. I want it to be set up like:

Radio Label Icon

in that order. My code HTML looks like this:

    <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>

I have tried to place the icon outside of the label class, but it does not display inline and I have also tried to use display:inline; in my CSS code, to no avail. I am trying to just separate the icon and the label, but I cannot seem to get this to work.

Any and all help would be greatly appreciated!

Thank you in advance!

Answer 1

Change the div class="radio" to an 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/

And improved with some css:

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