Question

我有一个导航列表。我希望较浅的灰色区域可以作为链接点击而不仅仅是文本。来源是：

http://mattcdecker.comeze.com/HELP/

<nav>
    <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
    <ul>
        <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
        <li><a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a><a href="work.php" title="View my work.">Work</a></li>
        <li><a href="about.php" title="Learn about me.">About</a></li>
        <li><a href="contact.php" title="Send me a message!">Contact</a></li>
    </ul>
</nav>

CSS

nav{
    float:right;
}
nav li{
    float:left;
    text-transform:uppercase;
    font-size:24px;
    background:#333;
    margin:70px 10px 0 10px;
    padding:10px;
}
nav a{
    color:#666;
}
nav a:hover{
    color:#fff;
}

Answer 1

请发布代码，而不是链接。

您需要将填充从list元素移动到锚点，并将display:block添加到锚点。

nav li {
    float: left;
    text-transform: uppercase;
    font-size: 24px;
    background: #333;
    margin: 70px 10px 0 10px;
    padding: 0;
}

nav a {
    color: #666;
    display: block;
    padding: 10px;
}

您遇到的问题是您的导航HTML格式错误，因此无法正常显示。

<nav>
    <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
    <!-- ^ this probably doesn't belong here -->
    <ul>
        <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
        <!-- ^ this certainly doesn't belong here -->

我希望单个导航背景可以点击

1 个答案: