Question

我正在英国上大学课程，我需要使用HTML和CSS创建一个网站。网站上的导航栏看起来不错，但是当我将其悬停在上方时，有空栏会突出显示，并且在任何地方都没有文本时可以点击，这确实困扰着我，有关它们出现方式的任何建议？

以视觉方式呈现的问题here

自从我跟踪了几年前上传的视频以来，我对问题可能是零的线索不多，而且该频道已经很长时间没有活跃了，所以我没有打扰任何评论，因此我来了。

这是我用于导航栏的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>

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

Answer 1

关闭锚标记可能会解决您的问题。 Flavio在评论中说得对...

如：

<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>

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

1 个答案: