可点击 <a> 标签背景

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 使 link 看起来像按钮并且并排放置。但是，我只能点击文本来激活link，而不是背景（按钮）。

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

Answer 1

<a> 个元素默认 display 编辑为 inline。您应该将其更改为 block 以占据其父项的整个 space。

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> 标签背景

Clickable <a> tag background

css

html

hyperlink

href