在CSS中,下拉菜单是常用的页面元素之一,它可以帮助用户更方便地选择需要的选项。然而,有时候我们会遇到下拉菜单出现空隙的情况,这可能会影响页面的美观和用户体验。 下拉菜单出现空隙的根本原因是行高的问题
/* 下拉菜单样式 */ .dropdown { position: relative; display: inline-block; } <br> .dropdown-content { display: none; position: absolute; z-index: 1; min-width: 160px; background-color: #f1f1f1; padding: 12px 16px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 设置行高 */ line-height: 1.5em; /* 垂直居中 */ vertical-align: middle; } <br> /* 悬停状态下的显示效果 */ .dropdown:hover .dropdown-content { display: block; }
粉丝
0
关注
0
收藏
0