Question

我创建了一个菜单，看起来像是以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  ||
|+----------+----------+----------+--------+|

我尝试根据媒体大小调整填充，但我最终得到了静态外观，因为它只调整了几种屏幕尺寸而不是动态调整。

Answer 1

这是一个完美的场景，您可以使用<div class = "someDiv"：

首先重置列表样式：
```
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将锚标记置于li中：
```
text-align: center
```
要完成任务，请添加一些边框和样式以供说明。

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

我想你可以从这里开始。请告诉我您对此的反馈。谢谢！

Answer 2

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

.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;" %/
}

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

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

3 个答案: