Question

我有一个水平无序列表作为主要导航。对于640px宽度视口，列表元素的最小填充右侧为1rem，当视口较大时，填充右侧应增加到3rem。我怎样才能做到这一点？

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

我做了一个演示： https://codepen.io/StandardNerd/pen/JXOJMX

Answer 1

您可以使用flexbox位置来获得相同的结果

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

Codepen demo

您可以选择将max-width设置为列表，以便在需要时在第一个和最后一个列表项周围创建更多空间，例如

ul {
  list-style: none;
  display: flex;
  max-width: 76%;
  margin: 0 auto; 
  padding: 0;
  justify-content: space-around;
}

是否可以在li上定义最小填充？

1 个答案: