填充父母不工作

Question

我设计了一个响应式菜单。所以我会添加填充与亲子价值。但是填充左侧不能使用父母身份值和隐私政策菜单将打破。

.menu { 
 
\t width: auto; 
 
} 
 

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

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

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

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

结果：

问题出在哪里？

我想使这个这样的波纹图像与响应：

我怎样才能做到这一点？

在此先感谢。

Answer 1

的衬垫作为父元素没有定义的宽度将不作为％工作，尝试：

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

地看到，10％的是则父元素的10％，如果它有一个固定的宽度。

Answer 2

如果你没有定义父宽度，百分比在a中的定义，而不是像你想要的那样，没有相对的witdh使百分比。 所以尽量弥补以前ansswer，定义宽度父母，或使这个：

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