Больше дзен и CSS

Question

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

Я пробовал div, и они работают в режиме блока, но не в режиме inline.Я пробовал span, a, li и многие другие.Все эти настройки в display:inline не позволяют мне устанавливать ширину элемента, поэтому я получаю только несколько пикселей фонового изображения.Если я добавлю несколько nbsp, это сработает, но вряд ли мне кажется, что это правильное решение.

Есть ли URL, в котором есть небольшая серия значков в строке, в которых для ихфоновые изображения?Желательно элементы которые я могу сделать: зависать?

Answer 1

Если вам нужно использовать display: inline, тогда вы должны поместить свои элементы в контейнер. Типичный пример:

<ul>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Настройка отображения элементов li: inline и отображения элементов a: block. Затем вы можете добавить ширину к элементам a вместе со спрайтом, а элементы li заставят элементы a сидеть горизонтально.

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

Answer 2

Stackoverflow использует эту технику. Если вы щелкнете правой кнопкой мыши по стрелкам вверх / вниз и выберите Просмотр фонового изображения (в Firefox), вы попадете на изображение спрайтов. Смотря на исходный код, они используют промежутки. Вы должны быть в состоянии установить ширину и высоту пролета с помощью CSS.

Если хотите, можете использовать

display: block; float: left;

и элементы выстроятся в линию, как будто они встроены. Затем вы можете установить высоту и ширину с помощью CSS.