Question

我已使用此代码制作导航菜单：

    <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使链接看起来像按钮并且彼此相邻。但是，我只能单击文本来激活链接，而不是背景（按钮）。

我的问题是：如何使链接周围的灰色区域也导致相同的链接？

Answer 1

默认情况下，{p> <a>个元素display编辑为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>

Answer 2

emmanuel回答的另一种方法是在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/

可点击的<a> tag background</a>

2 个答案: