可点击的 <a> 标签背景答案

【问题标题】：Clickable <a> tag background可点击的 <a> 标签背景
【发布时间】：2023-04-09 13:55:01
【问题描述】：

我用这段代码制作了一个导航菜单：

    <nav id="navitems">
        <ul>
            <li><a href="page1.html" id="link">PAGE 1</a></li>
            <li><a href="page2.html">PAGE 2</a></li>
        </ul>
    </nav>

我使用 CSS 使链接看起来像按钮并且彼此相邻。但是，我只能点击文本来激活链接，而不是背景（按钮）。

我的问题是：如何让链接周围的灰色区域也指向同一个链接？

【问题讨论】：

请提供您当前的 CSS。
How do I make the whole area of a list item in my navigation bar, clickable as a link? 的可能重复项

标签： css html hyperlink href

【解决方案1】：

<a> 元素默认displayed 为inline。您应该将其更改为 block 以占据其父级的整个空间。

ul {
  list-style-type: none;
}
li {
  background: blue;
  width: 100px;
}
li a {
  background: orange;
  display: block;
}

<nav id="navitems">
  <ul>
    <li><a href="#" id="link">PAGE 1</a>
    </li>
    <li><a href="#">PAGE 2</a>
    </li>
  </ul>
</nav>

【讨论】：

您可以使用href="#" 来避免页面加载中断

【解决方案2】：

伊曼纽尔的答案的替代方法是在a 标签中添加一些填充：

ul {
    list-style-type:none;
}
li { 
    float:left;
}
a {
    background:grey;
    color:white;
    text-decoration:none;
    padding: 10px 20px 10px 20px;
    margin-right:1px;
}

在此处查看实际操作：http://jsfiddle.net/rufneu0w/1/

【讨论】：