Question

这是我的代码： HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Squallz Test Page</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <h1>This is a header</h1>
    </header>
    <div class="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Repo</a></li>
        <li><a href="#">Code</a></li>
      </ul>
    </div>
    <div class="footer">
      <div class="footerinfo">
        <p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
        <p id="info">Personal website by <b>Squallz</b></p>
      </div>
    </div>
  </body>
</html>

CSS：

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url("../images/bg.png") no-repeat;
  background-attachment: fixed;
}

header {
  background-color: #088CAF;
  color: white;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

.navigation {
  position: sticky;
}

.navigation ul {
  background-color: #075E75;
  overflow: hidden;
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
  border-top: 2px solid #2E2E2E;
  border-bottom: 2px solid #2E2E2E;
}

.navigation ul li {
  display: inline-block;
  padding: 20px;
}

.navigation li:hover {
  background-color: #069DAA;
}

.navigation ul li a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.footer {
  color: white;
  text-align: center;
  width: 100%;
  background-color: #2E2E2E;
  border-top: 2px solid #099C9E;
  position: absolute;
  bottom: -800px;
  height: 80px;
  overflow: hidden;
}

我只是希望它能够突出显示带有链接的li时，整个内容都是可点击的。我知道我可以让他们所有的个人div由锚点包裹，但那是凌乱的

Answer 1

只需将<li>与<a>交换为：

<a href="#"><li>Home</li></a>

然后在你的CSS中更改它以保留设计

.navigation ul a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

Answer 2

您需要将a标记设为li的全宽和高度。将padding:20px;移至a代码css并添加display:block;可以使链接可以点击，而无需修改HTML。

将您的li代码css更新为：

.navigation ul li {
  display: inline-block;
}

将您的a代码css更新为：

.navigation ul li a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 20px;
  display:block;
}

完整代码：

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url("../images/bg.png") no-repeat;
  background-attachment: fixed;
}

header {
  background-color: #088CAF;
  color: white;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

.navigation {
  position: sticky;
}

.navigation ul {
  background-color: #075E75;
  overflow: hidden;
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
  border-top: 2px solid #2E2E2E;
  border-bottom: 2px solid #2E2E2E;
}

.navigation ul li {
  display: inline-block;  
}

.navigation li:hover {
  background-color: #069DAA;
}

.navigation ul li a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 20px;
  display:block;
}

.footer {
  color: white;
  text-align: center;
  width: 100%;
  background-color: #2E2E2E;
  border-top: 2px solid #099C9E;
  position: absolute;
  bottom: -800px;
  height: 80px;
  overflow: hidden;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Squallz Test Page</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <h1>This is a header</h1>
    </header>
    <div class="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Repo</a></li>
        <li><a href="#">Code</a></li>
      </ul>
    </div>
    <div class="footer">
      <div class="footerinfo">
        <p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
        <p id="info">Personal website by <b>Squallz</b></p>
      </div>
    </div>
  </body>
</html>

Answer 3

从li中取出填充，并使用自己的填充将锚点设置为display: block。

.navigation li a { display: block; padding: 20px; }

唯一真正令人担忧的是目标可能距离太近，您可以通过每个列表项之间稍大的边距来解决这些问题。

Answer 4

简单添加到.navigation ul li a

  padding: 20px;
  display: block;

将其从.navigation ul li

中删除

padding: 20px;

完整代码：

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url("../images/bg.png") no-repeat;
  background-attachment: fixed;
}

header {
  background-color: #088CAF;
  color: white;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

.navigation {
  position: sticky;
}

.navigation ul {
  background-color: #075E75;
  overflow: hidden;
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
  border-top: 2px solid #2E2E2E;
  border-bottom: 2px solid #2E2E2E;
}

.navigation ul li {
  display: inline-block;
}

.navigation li:hover {
  background-color: #069DAA;
}

.navigation ul li a {
  padding: 20px;
  display: block;
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.footer {
  color: white;
  text-align: center;
  width: 100%;
  background-color: #2E2E2E;
  border-top: 2px solid #099C9E;
  position: absolute;
  bottom: -800px;
  height: 80px;
  overflow: hidden;
}

＆＃13;

<header>
  <h1>This is a header</h1>
</header>
<div class="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Repo</a></li>
    <li><a href="#">Code</a></li>
  </ul>
</div>
<div class="footer">
  <div class="footerinfo">
    <p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
    <p id="info">Personal website by <b>Squallz</b></p>
  </div>
</div>

＆＃13;

如何将整个div转换为可点击链接？

4 个答案: