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

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

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

1. 首先重置列表样式：

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

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

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

3. 现在将flex: 1添加到每个li以使其占据所有可用的空白，并使用text-align: center将锚标记置于li中：

   .main-navigation > ul > li {
     flex: 1;
    }

4. 为了完成工作，添加了一些边框和样式用于说明。

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

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

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