导航栏无法正常工作答案

【问题标题】：Navigation bar not working properly导航栏无法正常工作
【发布时间】：2016-08-16 14:13:11
【问题描述】：

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

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>

【问题讨论】：

标签： html css frontend nav web-frontend

【解决方案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>

【讨论】：

【解决方案2】：

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

如果您在nav ul 上设置position:relative，它将强制元素在ul 容器中正确浮动。

nav ul{
  float: right;
  margin: 0;
  padding: 0;
  position:relative; /*ADD THIS*/
}

【讨论】：