CSS下拉落后留空（Snap Attached）如何消除空间？

我创建了一个下拉菜单，我试图摆脱我正在逐渐下拉之初，父组件及其子女之间的小空间，如下图所示的截图：CSS下拉落后留空（Snap Attached）如何消除空间？

我想下拉到从哪里开始标签，像这样开头：

-------- 
| Parent 
----------- 
| Child 
------------

请找一个代码片段下面附：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding-left: 25px; 
 
    padding-right: 10px; 
 
    position: absolute; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 1px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    min-width: 138.7px; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    color: #fff; 
 
    background: #2f3036; 
 
    text-decoration: none; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
li:hover a { 
 
    background: green; 
 
} 
 

 
li:hover ul a { 
 
    background: grey; 
 
    color: #2f3036; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
} 
 

 
li:hover ul a:hover { 
 
    background: green; 
 
    color: #fff; 
 
} 
 

 
li ul { 
 
    display: none; 
 
} 
 

 
li ul li { 
 
    display: block; 
 
    float: none; 
 
} 
 

 
li ul li a { 
 
    width: auto; 
 
    min-width: 100px; 
 
} 
 

 
ul li a:hover+.hidden, 
 
.hidden:hover { 
 
    display: block; 
 
    width: auto; 
 
} 
 

 
#menu { 
 
    text-align: center; 
 
}

<ul class="menu"> 
 
    <li><a href="#">Somthing</a></li> 
 
    <li> <a href="#">something</a> 
 
    <ul class="hidden"> 
 
     <li><a href="#">somethoing</a></li> 
 
     <li><a href="#">something</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

在此先感谢。

来源

2017-08-10 fff

'李UL {填充左：0;}' –

我想，我是第一个）他的回答是一样的，因为我写的） –

在隐藏的类上设置填充为0。 .hidden{padding: 0;}并且还删除了li ul li a{width:auto; min-width:100px;}JSFiddle我更改了媒体查询，以便在此处查看它。

ul { 
 
     list-style-type:none; 
 
     margin:0; 
 
     padding-left: 25px; 
 
     padding-right: 10px; 
 
     position: absolute; 
 
     } 
 
    li { 
 
     display:inline-block; 
 
     float: left; 
 
     margin-right: 1px; 
 

 
    } 
 
    li a { 
 
     display:block; 
 
     min-width:138.7px; 
 
     height: 50px; 
 
     text-align: center; 
 
     line-height: 50px; 
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
     color: #fff; 
 
     background: #2f3036; 
 
     text-decoration: none; 
 
     padding-left: 10px; 
 
     padding-right: 10px; 
 

 
    } 
 
    li:hover a { 
 
     background:green ; 
 
    } 
 
    li:hover ul a { 
 
     background: grey; 
 
     color: #2f3036; 
 
     height: 40px; 
 
     line-height: 40px; 
 
     text-align:center; 
 

 
    } 
 
    li:hover ul a:hover { 
 
     background: green; 
 
     color: #fff; 
 
    } 
 
    li ul { 
 
     display: none; 
 
    } 
 
    li ul li { 
 
     display: block; 
 
     float: none; 
 
    } 
 
    
 
    .hidden{ 
 
     padding: 0; 
 
    } 
 
    ul li a:hover + .hidden, .hidden:hover { 
 
     display:block; 
 
     width: auto; 
 
    } 
 
     #menu{ 
 
      text-align:center; 
 
     } 
 
    @media screen and (max-width : 460px){ 
 
     ul { 
 
      position: static; 
 
      display: none; 
 
     } 
 

 
     li { 
 
      margin-bottom: 1px; 
 
     } 
 

 
     ul li, li a { 
 
      width: 100%; 
 
     } 
 

 
     .show-menu { 
 
      display:block; 
 
     } 
 
    }

<ul class="menu"> 
 
     <li><a href="#">Something</a></li> 
 
     <li> <a href="#">something</a> 
 
     <ul class="hidden"> 
 
     <li><a href="#">something</a></li> 
 
     <li><a href="#">something</a></li> 
 
     </ul> 
 
     </li> 
 
</ul>

来源

2017-08-10 18:40:07

heyy谢谢！如果我想保持儿童标题的宽度与父母相同，那么我应该如何去解决上述目的？对此，我真的非常感激。 – fff

li{position: relative;} 
ul li ul{padding: 0; width: 100%;}

来源

2017-08-10 18:38:45

https://jsfiddle.net/ 3s4bob3e/5/ –

CSS下拉落后留空（Snap Attached）如何消除空间？

回答

相关问题