Question

当我将光标放在链接文本的顶部时，链接不可点击，但如果我将光标放在文本下方，它就会变得可点击。我现在正在学习，所以请向我解释为什么要这样做以及如何解决它。

HTML

<!DOCTYPE html>
<html Lang="en">
<head>
  <meta charset="utf-8">
  <title>Welcome!</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    *{
      margin: 0;
      padding: 0;
    }
    header{
      width: 1024px;
      margin: 0 auto;
      background-color: #81D4FA;
      height: 50px;
    }
    header h1{
      color: white;
      position: relative;
      left: 100px;
      top: 5px;
    }
    nav{
      margin-top: -20px;
      margin-right: 100px;
    }
    
    nav ul{
      float: right;
      margin: 0;
      padding: 0;
    }
    
    nav ul li{
      list-style-type: none;
        display: inline-block;
    }
    
    nav ul li a{
      text-decoration: none;
      color: white;
      padding: 16px 20px;
    }
    a:hover{
      background-color: #84FFFF;
    }
    .main{
      width: 1024px;
      margin-left: auto;
      margin-right: auto;
    }
    .laptop{
      width: 1024px;
    }
    .title{
      background-color: #0D23FD;
      height: 50px;
      width: 300px;
      position: relative;
      top: -650px;
      left: -10px;
      border-bottom-right-radius: 10px;
      border-top-right-radius: 10px;
    }
    .title h3{
      color: white;
      text-align: center;
      position: relative;
      top: 13px;
    }

      <header>
        <h1>Jack Smith</h1>
          <nav>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">My Work</a></li>
              <li><a href="#">Contact Me</a></li>
            </ul>
          </nav>
      </header>
        <div class="main">
          <img class="laptop" src="images/laptop.jpg">
          <div class="title">
            <h3>Front-End Web developer</h3>
          </div>
        </div>

Answer 1

这是因为你的<h1>是一个块级元素，它将放在菜单元素上。如果你给它display: inline-block，它将按预期工作。

块级元素始终在新行上开始并占用全宽可用（向左和向右延伸直至它能）。

请参阅下面的示例。

* {
  margin: 0;
  padding: 0;
}
header {
  width: 1024px;
  margin: 0 auto;
  background-color: #81D4FA;
  height: 50px;
}
header h1 {
  color: white;
  position: relative;
  left: 100px;
  top: 5px;
  display: inline-block;
  /* Added */
}
nav {
  margin-top: -20px;
  margin-right: 100px;
}
nav ul {
  float: right;
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style-type: none;
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  color: white;
  padding: 16px 20px;
}
a:hover {
  background-color: #84FFFF;
}
.main {
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.laptop {
  width: 1024px;
}
.title {
  background-color: #0D23FD;
  height: 50px;
  width: 300px;
  position: relative;
  top: -650px;
  left: -10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
.title h3 {
  color: white;
  text-align: center;
  position: relative;
  top: 13px;
}

<header>
  <h1>Jack Smith</h1>
  <nav>
    <ul>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">My Work</a>
      </li>
      <li><a href="#">Contact Me</a>
      </li>
    </ul>
  </nav>
</header>
<div class="main">
  <img class="laptop" src="images/laptop.jpg">
  <div class="title">
    <h3>Front-End Web developer</h3>
  </div>
</div>

Answer 2

由于某些样式之间的交互，问题正在发生。您将PersonReportGenerator元素浮动到右侧，但您还要将nav ul显示设置为nav ul li，这也是隐式浮动（尝试将其替换为inline-block并且您会看到相同的行为。）

如果在float: left上设置position:relative，则会强制元素在nav ul容器中正确浮动。

ul

导航栏无法正常工作

2 个答案: