时间戳

首页 > 解决方案 > 在我的网站导航栏中，可点击的部分比我想要的要多。他们为什么在那里？

html - 在我的网站导航栏中，可点击的部分比我想要的要多。他们为什么在那里？

问题描述

我正在英国上大学课程，我需要使用 HTML 和 CSS 创建一个网站。网站上的导航栏看起来不错，但是当我将鼠标悬停在它上面时，当任何地方都没有文字时，有一些空栏突出显示并显示为可点击，这真的让我很烦，关于它们如何/为什么出现的任何建议？

此处直观呈现的问题

自从我关注几年前上传的视频以来，我对问题可能是零的线索，并且该频道很长时间没有活跃，所以我没有打扰评论，因此我来到这里。

这是我用于导航栏的 CSS。

body {
    margin:0;
    padding:0;
    background:#ccc;
}

.nav ul {
    background-color:#344629;
    text-align:center;
    padding:0;
    margin:0;
}

.nav li {
    display: inline-block;
}

.nav a {
    text-decoration:none;
    color:white;
    width:100px;
    display:inline-block;
    padding:10px 10px 10px 0px;
    font-size:17px;
    font-family:Helvetica;
}

.nav a:hover {
    background:#5e9342;
    transition: 0.4s;
}

这是 HTML 代码。

<!DOCTYPE html>

<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome To Lanarkshire</title>

    <link rel="stylesheet" type="text/css" href="css/styles.css">

</head>

<body>
<div class="nav">
    <ul>
        <li><a href="#">Home</li>
        <li><a href="#">Gallery</li>
        <li><a href="#">Attractions</li>
        <li><a href="#">Food & Drink</li>
        <li><a href="#">Contact Us</li>
    </ul>
</div>

</html>

我显然只希望文本框被突出显示和可点击。

标签： htmlcss

解决方案

关闭您的锚标签可能会解决您的问题。弗拉维奥在评论中说得对……

如：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Attractions</a></li>
    <li><a href="#">Food & Drink</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

推荐阅读