Выровняйте изображение в пределах диапазона, чтобы быть справа от ячейки таблицы

Question

Я сделал JS Скрипку, чтобы показать вам, что в данный момент происходит.

https://jsfiddle.net/70z5Lm2r/2/

HTML

<table>
    <tbody>
        <tr>
            <td class="first">

            </td>
            <td class="second">
                <span>
                    <span onClick={doSomething} class="underline-hover">
                        <img src="pic.png" />
                        This is some clickable data. Sometimes it overflows.
                    </span>

                </span>
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    table-layout: fixed;
    word-wrap: break-word;
    width: 50%;
    max-width: 100%;
}

td {
    border: 1px solid black;
}

.first {
    width: 40%;
}

.second {
    width: 60%;
}

.underline-hover:hover {
    text-decoration: underline;
    cursor: pointer;
}

img {
    height: 20px;
    width: 20px;
    margin-top: 2px;
    margin-left: 8px;
    vertical-align: top;
    float: right;
}

Как видите, при наведении указателя мыши на значок пользователя на тексте возникает эффект подчеркивания. Это связано с тем, что и текст, и изображение находятся внутри span с классом underline-hover и обработчиком onClick.

Я хочу, чтобы при наведении текст, только текст выделен. При наведении на иконку ничего не происходит. Тем не менее, я все еще хочу, чтобы значок был гриппом sh справа, а текст был перенесен соответствующим образом, как в данный момент отображается.

Я попытался извлечь тег img из внутреннего span примерно так:

<span>
    <span onClick={doSomething} class="underline-hover">
        This is some clickable data. Sometimes it overflows.
    </span>
    <img src="pic.png" />
</span>

Это удовлетворяет поведению, но свойство float тега img приводит к его удалению из потока страницы, в результате чего текст и значок смешиваются вместе. .

Буду признателен за любую помощь в достижении желаемого поведения и взгляда.

Answer 1

Ваша попытка была очень близка. Поскольку вы перемещаете img вправо, это должно быть до <span>.

<span>
    <img src="pic.png" />
    <span onClick={doSomething} class="underline-hover">
        This is some clickable data. Sometimes it overflows.
    </span>
</span>

Далее, создайте стиль для .underline-hover с margin-right:20px;. В настоящее время промежуток заполняет ширину его контейнера, так что IMG не вызывает наведение, промежуток. Мы создаем поле той же ширины, что и плавающее img, и вам должно быть хорошо до go.