填充父母不工作

Question

我正在设计一个响应式菜单。所以我将添加带有父母值的填充。但Padding在左边没有使用parentage值，而且隐私政策菜单会中断。

＆＃13;

＆＃13;

.menu {
  width: auto;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  display: inline-table;
}

.menu a:link,
.menu a:visited {
  padding: 12px 10%;
  display: block;
  text-decoration: none;
  color: black;
  text-transform: none;
  border-bottom: 2px solid white;
  transition: all .3s;
  -webkit-transition: all .3s;
  border: 1px solid red;
  width: auto;
}

＆＃13;

<div class="menu">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="about-us.php">About</a></li>
    <li><a href="contact-us.php">Contact</a></li>
    <li><a href="privacy-policy.php">Privacy Policy</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

结果：

问题出在哪里？

我希望通过响应来制作这样的波纹管图像：

我该怎么做？

提前致谢。

Answer 1

填充不能用作％，因为父元素没有定义的宽度，请尝试：

.menu ul li {
    display: inline-table;
    width: 100px;
}

如果它具有固定的宽度，则看10％是父元素的10％。

Answer 2

如果，你没有定义父宽度，a中的百分比定义，而不是你想要的wrk，那么就没有相对的百分比来制作它。 所以尝试先做一下，在父母中定义宽度，或者这样做：

.menu a, .menu a:link, .menu a:visited {
    padding: 12px 10px;

使用px而不是％

定义填充

即使这里有一个fiddle父dwidth definitio，我更喜欢这样做

in ul and not in li.
.menu {
    width: auto;
  background: grey;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  display:table;
  width:100%;
  background: green;
}

.menu ul li {
    display: table-cell;
  width:auto;

}

.menu a, .menu a:link, .menu a:visited {
    padding: 12px 10%;
  margin:auto;
    display: block;
    text-decoration: none;
    color: black;
    text-transform: none;
    border-bottom: 2px solid white;
    transition: all .3s;
    -webkit-transition: all .3s;
    border: 1px solid red;

}

或者您可以更改padding with px：

.menu {
    width: auto;
  background: grey;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  display:table;
  width:auto;
  background: green;
}

.menu ul li {
    display: table-cell;
  width:auto;

}

.menu a, .menu a:link, .menu a:visited {
    padding: 12px 10px;
  margin:auto;
    display: block;
    text-decoration: none;
    color: black;
    text-transform: none;
    border-bottom: 2px solid white;
    transition: all .3s;
    -webkit-transition: all .3s;
    border: 1px solid red;

}

Answer 3

尝试将这些属性更改为包含li元素，并从菜单中删除元素：

.menu ul li {
   display: inline-table;
   padding: 12px 10%;
   border: 1px solid red;
}

*编辑：虽然，如果响应式菜单是你所追求的，你可能想要采用不同的路线，例如将容器li元素的宽度设置为％，例如24％或类似的东西

.menu ul li {
   display: inline-table;
   width: 24%;
}