导航链接点击范围过大如何调整？padding/margin问题求助

问题描述 #

按照Danni Crossing的教程制作下拉菜单时，遇到导航链接点击范围过大的问题，尝试缩小点击范围时，链接会出现移位或消失的情况。以下是对应的HTML和CSS代码：

HTML代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
       <ul>
        <li><a class="WOW" href="index.html">Home!</a><ul> 
              <li><a href="addimage.html">ADD IMAGE</a></li>
              <li><a href="addidle.html">ADD IDLE</a>  </li>
              <li><a href="appearence.html">APPEARENCE</a></li>
              <li><a href="settings.html">SETTINGS</a></li>
           </ul>
        </li>
        <li><a class="WHAT" href="#">Log in</a></li>
        <li><a class="HOW" href="#">Make a pocket!</a></li>
     
          
        
    </ul>  
    </nav>
   
</body>
</html>

CSS代码 #

@font-face {
    font-family: atlantis;
    src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {
    font-family: WHY;
    src: url(FONTS/seguisb.ttf);
}

.WOW {
    font-family: WHY;
    font-size: 55px;
    position: relative; right: 255px; bottom: 20px;
}

.WHAT {
    font-size: 55px;
    position: relative; left: 555px; bottom: 20px;
}
.HOW {
    font-family: atlantis;
    color: black;
    position: relative; left: 1369px; top: 60px;
}   

/*font separation*/

*{
    margin: 0;
    padding: 0;
}
body { 
    background-color: #fbfbfb;
}

nav {
    width: 100%;
    height: 100px;
    background-color: #b5a371;
}

nav p {
    font-family: atlantis;
   color: rgb(255, 255, 255);
   font-size: 25px;
   line-height: 55px;
   float: left;
   padding: 0px 20px;
}

nav ul {
 float: left;
}

nav ul li { 
    float: left;
    list-style-type: none;
    position: relative;
}
nav  ul li a {
    display: block;
    font-family: atlantis;
    color: rgb(255, 255, 255);
    font-size: 20px;
    padding: 22px 320px;
}
nav  ul li ul {
    display: none;
    position: absolute; top: 99px;
    background-color: #370d02;
    padding: 10px;
    border-radius: 9px;
}
nav  ul li:hover ul {
    display: block;
}
nav  ul li ul li  {
    width: 150px;
    border-radius: 4px;
}
nav  ul li ul li a {
    padding: 8px 14px;
}
nav  ul li ul li a:hover {
    padding: 8px 14px;
    background-color:  #98652c;
}

ul {
}

ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}

ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}

解决方法 #

1. 缩小导航链接的点击范围 #

问题核心是nav ul li a中的padding: 22px 320px值过大，直接导致点击范围异常宽大。将其替换为合理的内边距：

nav ul li a {
    display: block;
    font-family: atlantis;
    color: rgb(255, 255, 255);
    font-size: 20px;
    padding: 22px 20px; /* 调整为贴合文字的内边距 */
}

2. 移除重复的列表样式 #

代码末尾存在重复的ul、ul li、ul li a样式块，会和导航内的列表样式冲突，导致布局混乱，直接删除这部分代码：

/* 删除以下重复代码块 */
ul {
}

ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}

ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}

3. 改用flex布局实现导航项分布 #

原代码用position: relative手动调整位置，容易导致错位。改用flex布局实现均匀分布：

/* 修改nav ul的样式 */
nav ul {
    display: flex;
    justify-content: space-around; /* 导航项均匀分布 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 撑满导航栏高度 */
    width: 100%; /* 撑满导航栏宽度 */
}

/* 移除三个导航项的相对定位属性 */
.WOW {
    font-family: WHY;
    font-size: 55px;
}

.WHAT {
    font-size: 55px;
}
.HOW {
    font-family: atlantis;
    color: black;
}

4. 修正下拉菜单的定位 #

将下拉菜单的top值改为100%，确保它刚好贴在导航栏下方，避免错位：

nav ul li ul {
    display: none;
    position: absolute; 
    top: 100%; /* 替换原有的top:99px */
    background-color: #370d02;
    padding: 10px;
    border-radius: 9px;
    width: auto; /* 重置flex布局带来的宽度影响 */
}

修改后的完整CSS代码 #

@font-face {
    font-family: atlantis;
    src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {
    font-family: WHY;
    src: url(FONTS/seguisb.ttf);
}

.WOW {
    font-family: WHY;
    font-size: 55px;
}

.WHAT {
    font-size: 55px;
}
.HOW {
    font-family: atlantis;
    color: black;
}   

/*font separation*/

*{
    margin: 0;
    padding: 0;
}
body { 
    background-color: #fbfbfb;
}

nav {
    width: 100%;
    height: 100px;
    background-color: #b5a371;
}

nav p {
    font-family: atlantis;
   color: rgb(255, 255, 255);
   font-size: 25px;
   line-height: 55px;
   float: left;
   padding: 0px 20px;
}

nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
}

nav ul li { 
    list-style-type: none;
    position: relative;
}
nav  ul li a {
    display: block;
    font-family: atlantis;
    color: rgb(255, 255, 255);
    font-size: 20px;
    padding: 22px 20px;
}
nav  ul li ul {
    display: none;
    position: absolute; 
    top: 100%;
    background-color: #370d02;
    padding: 10px;
    border-radius: 9px;
    width: auto;
}
nav  ul li:hover ul {
    display: block;
}
nav  ul li ul li  {
    width: 150px;
    border-radius: 4px;
}
nav  ul li ul li a {
    padding: 8px 14px;
}
nav  ul li ul li a:hover {
    padding: 8px 14px;
    background-color:  #98652c;
}

内容的提问来源于stack exchange，提问作者WowJustacomfywebsitesupport