Как правильно расположить стрелку этого виджета?

Question

HTML-код для заголовка виджета выглядит следующим образом.

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

Мой код CSS:

.widget-header span { float: left; }
.widget-header a, img { float: right; }

Если это так, стрелка вправо widgets_more будет располагаться слева от текста 'more', как это,

Как я могу получить правильный порядок с изменением кода CSS?

Спасибо.

Answer 1

Вместо того, чтобы поместить стрелку рядом со ссылкой в ​​виде изображения, вы должны установить его в качестве фонового изображения в классе.

Что-то подобное должно сделать это (не проверено, но должно работать):

CSS:

a.widgets-more{
    background-image:url(/img/widgets/widgets_more.gif);
    background-position:right;
    background-repeat:no-repeat;
    padding-right:10px;
}

Если вы хотите, чтобы ссылка появлялась слева от ссылки, используйте следующее:

a.widgets-more{
    background-image:url(/img/widgets/widgets_more.gif);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:10px;
}

Затем примените класс по вашей ссылке :

<a class="widgets-more" href="sh/index.php?type=rec">more</a>

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

<div class="widget-header">
    <a class="widgets-more" href="sh/index.php?type=rec">more</a>
    <span>caption</span>
</div>