#html #tailwind-css
Вопрос:
Я пробовал использовать space-y-2
и leading
, но до сих пор не могу сделать промежутки между ними.
<a href="" class="bg-blue-dark lg:hidden">
<span class="block w-7 h-1 mb-1"></span>
<span class="block w-7 h-1 mb-1"></span>
<span class="block w-7 h-1"></span>
</a>
Ответ №1:
Согласно вашему текущему коду, между вашими гамбургерными батончиками есть пространство, потому что вы использовали класс нижнего предела mb-1
, т. е.
Другой подход состоял бы в том, чтобы сделать панели гибкими элементами, затем расположить их по столбцам и обосновать содержимое. Не забудьте добавить определенную высоту в контейнер flex box.
<a href="" class="bg-blue-dark lg:hidden h-5 flex flex-col justify-between">
<span class="block w-7 h-1"></span>
<span class="block w-7 h-1"></span>
<span class="block w-7 h-1"></span>
</a>
*Если bg-blue-dark
ваш пользовательский класс добавляет цвет к полосам, добавьте его в <span>
теги вместо <a>
тега.