Reputation: 4183
I have a horizontal unordered list as main navi. The list elements have a min padding-right of 1rem for 640px width viewport and the padding-right should increase up to 3rem when the viewport is larger. How can i achieve this?
HTML:
<ul>
<li>
<a href="#" class="toggle-nav">Women</a>
</li>
<li>
<a href="#" class="toggle-nav">Men</a>
</li>
<li>
<a href="#" class="toggle-nav">Stores</a>
</li>
<li>
<a class="lifestyle" href="/lifestyle">Lifestyle</a>
</li>
<li class="language">
<a href="#">FR | EN</a>
</li>
</ul>
CSS:
ul {
text-align: center;
list-style-type: none;
}
li {
display: inline-block !important;
margin: 0;
padding-right: 1rem;
}
I made a demo: https://codepen.io/StandardNerd/pen/JXOJMX
Upvotes: 2
Views: 4377
Reputation: 123438
You could use flexbox
position to achieve the same result
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
justify-content: space-around;
}
Optionally you may set a max-width
to the list to create more space around the first and last list-item if needed, e.g.
ul {
list-style: none;
display: flex;
max-width: 76%;
margin: 0 auto;
padding: 0;
justify-content: space-around;
}
Upvotes: 1