Сделать элемент списка подходящим для его содержимого

Question

У меня есть следующий список в HTML:

<ul>
    <li><span class="button">A</span></li>
    <li><span class="button">B</span></li>
    <li><span class="button">C</span></li>
</ul>

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

.button
{
    background: blue;
    padding: 0.5em;
}

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

Кроме того, причина в том, что я создал станы внутри li вместо стилиСами li, потому что некоторые из этих промежутков будут ссылками.

Answer 1

Эта замечательная статья раскрывает вашу проблему и показывает, что такое хорошая практика: http://css -tricks.com / keep-margins-out-of-link-lists

То есть, если бы я понял, к чему вы стремитесь, ваш вопрос мог бы быть немного яснее. :)

Answer 2

Вы должны объявить span блок-элементом с display:block;

Это решение для вас?