Issue
Having to add margin classes to each LI seems REALLY repetitive on a menu that is not being dynamically generated. This feels dirty like using style="" attributes...
Surely there must be a better way?
Not a huge deal on a small menu, but the final menu will have many levels of submenu.
I wonder if I should just write a rule in my stylesheet to add margins on my menu items?
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<nav class="p-2 bg-indigo-900 text-white">
<ul class="flex flex-row">
<li class="mr-1">
<a href="#">Home</a>
</li>
<li class="ml-1 mr-1">
<a href="#">About</a>
</li>
<li class="ml-1 mr-1">
<a href="#">Services</a>
</li>
<li class="ml-1 mr-1">
<a href="#">History</a>
</li>
<li class="ml-1">
<a href="#">Contact</a>
</li>
</ul>
</nav>
Solution
I am not familiar with tailwind-css
but you can make use of the :last-child
and :first-child
selectors.
nav ul li {
margin-left: 10px;
margin-right: 10px;
}
nav ul li:first-child {
margin-left: 0px;
}
nav ul li:last-child {
margin-right: 0px;
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<nav class="p-2 bg-indigo-900 text-white">
<ul class="flex flex-row">
<li class="">
<a href="#">Home</a>
</li>
<li class="">
<a href="#">About</a>
</li>
<li class="">
<a href="#">Services</a>
</li>
<li class="">
<a href="#">History</a>
</li>
<li class="">
<a href="#">Contact</a>
</li>
</ul>
</nav>
Answered By - user9408899
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.