Как создать поле тегов, например, mixx & вкусно?

Question

Я пытался искать в Google, но никто не говорил об этом.

Я хочу, чтобы решение css создало поле тегов для жидкости, подобное оранжевым в этом:

http://www.mixx.com/stories/10402914/haiti_us_gov_t_grants_matching_3_to_1_donations_to_worldvision_for_haiti

так, даже если слово длинное, поле тега будет соответствовать ему.

я хочу такую ​​же форму

Спасибо

Answer 1

Mixx использует упорядоченный список, хотя неупорядоченный список подойдет просто:

<ol class="tag-list">
    <li><a href="http://www.mixx.com/tags/crisis-assistance" rel="tag" title="crisis assistance">crisis assistance</a></li>
    <li><a href="http://www.mixx.com/tags/earthquake" rel="tag" title="earthquake">earthquake</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/world-vision" rel="tag" title="world vision">world vision</a></li>
</ol>

Установите список на верхнем уровне, чтобы не было маркеров или другой графики, связанной с элементами списка:

ol, ul {
    list-style:none outside none;
}

Затем настройте элементы списка так, чтобы они отображались горизонтально (встроенно). Mixx использовал float: left;, но вы также можете использовать display: inline;:

ol.tag-list li {
    background:url("../images/layout/tag-bg.gif") no-repeat scroll 100% 0 transparent;
    float:left;
    margin:0 0.8em 0.8em 0;
    padding:0 1em 0 0;
}

Вы заметите, что Mixx имеет фон для своих элементов списка, установленный на этот спрайт:
_{(источник: mixx.com )}

Ссылка внутри каждого элемента списка также использует этот же спрайт, но изменяет его положение в CSS (background: ... -19px ...):

ol.tag-list li a {
    background:url("../images/layout/tag-bg.gif") no-repeat scroll 0 -19px transparent;
    color:#955C0F;
    display:block;
    height:1.4em;
    padding:0.15em 0 0.2em 1.2em;
    text-decoration:none;
}

Это сдвигает вертикальное положение спрайта (высота которого 38px) на 19px, эффективно показывая конец стрелки.

Это, по сути, все, что нужно сделать.

Answer 2

Это метод css, который называется раздвижные двери.Вы можете найти хорошую статью об этом здесь: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

Mixx использует эту технику только с одним изображением.Изображение прикреплено к тегу <li> и тегу <a>.Перекрытие изображений гарантирует, что стрелка будет столько, сколько нужно.