Html 导航栏工作不正常

当我把光标放在链接文本的正上方时，链接是不可点击的，但是如果我把光标放在文本下方一点，它就可以点击了。我现在正在学习，所以请向我解释为什么它会这样做，以及如何修复它

HTML

杰克·史密斯





前端Web开发人员

这是因为您的

是块级元素，它将覆盖在菜单元素上。如果您给它

display:inline block

，它将按预期工作

块级元素总是从新行开始并占用 全宽可用（尽可能向左和向右延伸 可以）

请参见下面的示例

*{
保证金：0；
填充：0；
}
标题{
宽度：1024px；
保证金：0自动；
背景色：#81D4FA；
高度：50px；
}
收割台h1{
颜色：白色；
位置：相对位置；
左：100px；
顶部：5px；
显示：内联块；
/*增加*/
}
导航{
利润上限：-20px；
右边距：100px；
}
导航ul{
浮动：对；
保证金：0；
填充：0；
}
李国荣{
列表样式类型：无；
显示：内联块；
}
海军ulli a{
文字装饰：无；
颜色：白色；
填充：16px 20px；
}
a:悬停{
背景色：#84FFFF；
}
梅因先生{
宽度：1024px；
左边距：自动；
右边距：自动；
}
.笔记本电脑{
宽度：1024px；
}
.头衔{
背景色：#0D23FD；
高度：50px；
宽度：300px；
位置：相对位置；
顶部：-650px；
左：-10px；
边框右下半径：10px；
边框右上角半径：10px；
}
.标题h3{
颜色：白色；
文本对齐：居中；
位置：相对位置；
顶部：13px；
}

杰克·史密斯








前端Web开发人员

问题的出现是因为您的某些样式之间存在交互作用。您将

nav ul

元素向右浮动，但也将

nav ul li

显示设置为

inline block

，这也执行隐式浮动（尝试将其替换为

float:left

，您将看到相同的行为）

如果在

导航ul

上设置

位置：相对
，它将强制元素在
ul
容器内正确浮动

nav ul{
  float: right;
  margin: 0;
  padding: 0;
  position:relative; /*ADD THIS*/
}

nav ul{
  float: right;
  margin: 0;
  padding: 0;
  position:relative; /*ADD THIS*/
}