Question

这是我的第一个网站这是我的HTML代码：

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.s-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.container {
  border: 1px solid #ccc;
  height: 50px;
  width: 100%;
  align-items: center;
}

.container>ul {
  padding: 0;
  margin: 0;
  display: block;
  padding-left: 200px;
}

.container>ul>li {
  display: block;
  list-style: none;
  padding: 15px 10px 17px 13px;
  float: left;
  cursor: pointer;
}

ul li:hover {
  display: block;
  color: black;
  background-color: #e4e6e8;
}

a {
  text-decoration: none;
  color: #535a60;
}

a:hover {
  color: black;
}

#logoimage {
  float: left;
  height: 50px;
  width: 40px;
}

<header class="s-header">
  <div class="container">
    <ul>
      <li class=""><a href="page2.html">A1</a></li>
      <li class=""><a href="#">A2</a></li>
      <li class=""><a href="#">A3</a></li>
    </ul>
  </div>
</header>

我想将三个标签链接到三个不同的页面，并且我试图让整个列表项中的链接可以点击，而不仅仅是将光标放在链接上...对不起，对于Web开发的新手

Answer 1

将display:block添加到锚元素，并将填充从列表项移动到锚元素。这将确保整个区域被锚元素覆盖，因此可以点击。

这是a样式的补充：

a {
   display:block;
   padding: 15px 10px 17px 13px;
   ...
}

请参阅下面的完整摘录

＆＃13;

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.s-header {
  border-top: 3px solid #F48024;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.container {
  border: 1px solid #ccc;
  height: 50px;
  width: 100%;
  align-items: center;
}

.container>ul {
  padding: 0;
  margin: 0;
  display: block;
  padding-left: 200px;
}

.container>ul>li {
  display: block;
  list-style: none;
  float: left;
  cursor: pointer;
}

ul li:hover {
  display: block;
  color: black;
  background-color: #e4e6e8;
}

a {
  display: block;
  padding: 15px 10px 17px 13px;
  text-decoration: none;
  color: #535a60;
}

a:hover {
  color: black;
}

#logoimage {
  float: left;
  height: 50px;
  width: 40px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <header class="s-header">
    <div class="container">
      <ul>
        <li class=""><a href="page2.html">Questions</a></li>
        <li class=""><a href="#">Tags</a></li>
        <li class=""><a href="#">Users</a></li>
      </ul>
    </div>
  </header>
  <link rel="stylesheet" href="main.css">
</body>

</html>

＆＃13;

Answer 2

如果我是对的：尝试替换<li><a>Link</a></li> 与<a><li>Link</li></a>

使列表项可点击

2 个答案: