如何使用 CSS 为列表菜单构建响应式填充？答案

【问题标题】：How to build a responsive padding for list menus using CSS?如何使用 CSS 为列表菜单构建响应式填充？
【发布时间】：2019-04-02 02:47:03
【问题描述】：

我创建了一个以 div 容器为中心的菜单：

|                                                   |
|       +--------+--------+--------+--------+       |
|       |  home  | teams  |  games |  about |       |
|       +--------+--------+--------+--------+       |

SC：

.main-navigation ul > li.menu-item > a {
  -webkit-transition: 0.10s;
  -moz-transition: 0.10s;
  transition: 0.10s;

  color: #fff;
  background-color: #757575;
  padding-top: 5px;
  padding-bottom: 5px;
  /* padding-left: ;  i want this to be responsive
  padding-right: ; */
}

我真正想要创建的是一个响应式菜单，它填充了两边的白色边框。

|                                                   |
|+------------+------------+------------+----------+|
||    home    |   teams    |  games     |   about  ||
|+------------+------------+------------+----------+|

并在浏览器调整大小时更改填充大小：

|                                           |
|+----------+----------+----------+--------+|
||    home  |   teams  |  games   | about  ||
|+----------+----------+----------+--------+|

我尝试根据媒体尺寸调整填充，但我最终获得了静态外观，因为它仅在几个屏幕尺寸上进行调整，而不是动态调整。

【问题讨论】：

如果你想让填充，边距样式响应总是以百分比形式。
我认为响应式的诀窍是始终使用相对单位（如em）。百分比是否比其他上下文相关单位更具响应性？
我不知道。在填充上使用 % 对我不起作用。
@Anthony.. 您应该使用 Bootstrap 使菜单响应...而不指定任何大小（百分比），使用网格系统...
@jitendrajoshi - 感谢您的提示，但我尽量避免使用任何东西，因为我不是 UI 设计师。我还尝试避免任何可能在一年内过时或使基础文档受到污染的特定库。但我认为你真的打算将你的建议直接提交给我不是的 OP。

标签： html css

【解决方案1】：

这是一个完美的场景，您可以使用flexbox：

首先重置列表样式：

.main-navigation ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

现在将其声明为 flexbox 并将它们与 space-around 对齐，如下所示：

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

现在将flex: 1 添加到每个li 以使其占据所有可用的空白，并text-align: center 将锚标记置于li 内：
```
.main-navigation > ul > li {
  flex: 1;
 }
```
为了完成这些，添加了一些边框和样式用于插图。

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

.main-navigation > ul > li {
  flex: 1;
  background-color: #757575;
 
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  border: 1px solid #fff;
}

.main-navigation ul > li.menu-item > a {
  -webkit-transition: 0.10s;
  -moz-transition: 0.10s;
  transition: 0.10s;
  color: #fff;
}

<div class="main-navigation">
  <ul>
    <li class="menu-item"><a>home</a>
    </li>
    <li class="menu-item"><a>teams</a>
    </li>
    <li class="menu-item"><a>games</a>
    </li>
    <li class="menu-item"><a>about</a>
    </li>
  </ul>
</div>

我想你可以从这里开始。让我知道您对此的反馈。谢谢！

【讨论】：

【解决方案2】：

我可以想到几种方法（使用 flexbox、<table> 或 display: table-cell;），但最简单的可能就是在您的 <li> 标签上设置 width: 25%;。试试：

.main-navigation ul > li.menu-item {
    width: 25%;
    display: inline-block;
}

.main-navigation ul > li.menu-item a {
    width: 100%;  /* or possibly just "display: block;" %/
}

【讨论】：

它没有填充 div 上的空间。它仍然居中。宽度：25%；减少到 25%
您实际上可能需要在<li> 上设置width 和display: inline-block。刚刚更新了我的答案，让我知道这是否有效。

【解决方案3】：

除了 rem 之外，您是否测试过其他形式的变量测量？示例：

ul{
  background: #ccc;
  display:flex;
  justify-content:center;
  list-style:none;
}

li{
  align-items: center;
  background:#fff;
  justify-content:space-around;
  padding:3em;
  margin:3em;
}

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li> 
</ul>

或

ul{
  background: #ccc;
  display:flex;
  justify-content:center;
  list-style:none;
}

li{
  align-items: center;
  background:#fff;
  justify-content:space-around;
  padding:4%;
  margin:4%;
}

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li> 
</ul>

还是媒体查询？

@media only screen and (max-device-width: 760px) {
li {
padding: this is for css on screens smaller than 760px;
}
.class { 
margin-top: don't forget to close media queries bracket though;
     } 
}

【讨论】：