CODEWITHSUNDEEP
htmlcss
StandardNerd
StandardNerd

Reputation: 4183

Is it possible to define a min padding on a li?

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

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

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;
}

Codepen demo

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

Related Questions