我有一个带有标签的菜单,由于某种原因,它们不希望稍微靠近菜单的左侧。我尝试删除所有其他填充的东西等,但它并没有影响菜单边缘和标签文本之间的奇怪的额外空间。
另外,我想让下拉列表在ul li ul li标签周围没有填充,只有父标签本身。下图显示左侧是当前项目https://codepen.io/gracethelittleartist/pen/EvMbNR?editors=1100),右侧显示了我想要的样子。
ul{list-style:none;}
a{ text-decoration: none;color: black;}
.ul-li {position: relative;}
ul li {padding:10px;}
.ul-li > .ul-li-ul {max-height: 0;transform: scaleY(0);}
.ul-li > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.ul-li > input[type="checkbox"]:checked ~ .ul-li-ul {
max-height: 9999px;
display: block;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.ul-li {position: relative;}
.ul-li > .ul-li-ul {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
transform: scaleY(0);
transform-origin: 50% 0%;
transition: transform 0s ease-out 0.6s,max-height 0.6s ease-out;
}
.ul-li > .ul-li-ul li a {
display: block;
background: #E3E3E3;
padding: 10px 10px;
}
.ul-li > .ul-li-ul li a:hover {background: #D1D1D1;}
.ul-li > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.ul-li > input[type="checkbox"]:checked ~ .ul-li-ul {
max-height: 900px;
display: block;
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
transition: max-height 2s ease-in-out;
}
.ul-li > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
transition: transform 0.6s;
}
nav ul li:not(.search):hover {background: white;}
@keyframes hideAnimation {
0% {transform: scaleY(0.5);}
60% {transform: scaleY(0.25);}
80% {transform: scaleY(0);}
100% {transform: scaleY(0);}
}
.wrap {
position: relative;
z-index: 1;
background: #E8E8E8;
max-width: 330px;
margin: 0 auto;
}
答案 0 :(得分:2)
你的问题是:
ul li {padding:10px;}
如果你只为父母指定这个,一切正常。 Tipp:使用Google Chrome的检查功能来(de)激活CSS样式。
答案 1 :(得分:0)
尝试使用最后一个css文件
https://jsfiddle.net/Alan_van_Buuren/2d0Lnqvj/
.ul-li-ul > li> a{
color:red;
margin-left:-20px;
margin-top:-20px;
line-height: 20px;
vertical-align:middle;
}
希望帮助你。