CSS: отображать элемент с шириной "встроенный"

Question

У меня есть значок, который я хотел бы иметь возможность перетаскивать в текст в произвольных точках и иметь его "поток" с текстом.

Справочная информация:

Тег <img> лучше всего подходит для этого. Однако я не хочу указывать href везде. Это создаст проблемы в будущем, если значок / местоположение изменится. Это также зависит от того, знаю ли я путь к изображению, который я не всегда буду знать из-за переписывания URL-адресов и различных сопоставлений с одной и той же страницей и т. Д. Я хотел бы сделать что-то вроде <span class="icon"></span> и иметь значок в качестве background-image. Конечно, это не работает, так как вы не можете иметь ширину встроенного элемента. Наличие его в качестве блочного (то есть. <div>) элемента не работает (по понятным причинам) и плавающего - тоже не работает. display: inline-block; работает в некоторых браузерах, но не во всех. Использование padding: для выбора правильной высоты и ширины дает разные результаты в разных браузерах. Использование тега <img> с прозрачным изображением для href и фонового изображения работает, но кажется хакерским.

Есть какие-нибудь мысли о том, как лучше всего это сделать?

Answer 1

Это может показаться немного хакерским, но вы можете использовать background-image с font-size и дополнить свой span достаточным количеством неразрывных пробелов для отображения изображения.

<span style="background-image:url('icon.gif'); width:200px; font-size: 36pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

Конечно, это не будет точный размер, который вам понадобится, но с небольшой ловкостью вы можете найти подходящий результат.

Answer 2

Вы можете сделать <span class="icon"></span> абсолютно позиционированным в вашей ссылке следующим образом:

<a href="">Some text <span class="icon"></span></a>

Вы можете указать ширину / высоту для абсолютно позиционированных элементов, чтобы CSS выглядел примерно так:

a {
    position: relative;
    padding-right: 30px; /* width of your icon, assuming you're placing to the right of the text */
}

a .icon {
    display: block; /* for good measure, but won't be required in all browsers */
    position: absolute;
    top: 0;
    right: 0;

    width: 30px;
    height: 30px;

    background: url(your-icon.png) no-repeat 0 0;
}

Устанавливая положение <a> относительно, оно превращает его в систему координат для абсолютно позиционированного <span class="icon">.

Использование тега изображения для значка

Если вы не знаете, где появится значок, вы можете использовать тег <img> с прозрачным .gif в качестве источника.

<p>Lorem ipsum <img src="clear.gif" alt="icon" class="icon" /> dolar velarium</p>

Затем установите реальный источник значков, используя свойство фона CSS:

img.icon {
    height: 30px;
    width: 30px;
    background: url(true-icon-src.png) no-repeat 0 0;

    /* Use the following if you want to adjust the image's vertical position */
    position: relative;
    top: 5px;
}