在HTML项目的导航栏中编写徽标编码问题

Question

我是HTML和CSS的新手并尝试构建主页。

我已在导航栏中使用徽标编码，但这样做会导致HOME页面的href偏斜。

请看截图。！

这是因为我还没有在div中编码徽标或编写了一个clearfix吗？

我可以获得如何解决这个问题的帮助，这样美学看起来很合适。

  

我的HTML

<div class="nav-container">
    <nav class="container">
      <ul>
        <a href="#" class="pull-left"><img src="images/kphr.png" alt="KPHR">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About KPHR Solutions</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="candidates.html">Candidates</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
      <div class="clear"></div>
    </nav>
  </div>

  

我的CSS

a.btn {
  margin: 0 1em;
}



/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

.clear {
    clear: both;
}



    .nav-container {
        background: rgba(0,0,0,0.8);
    }

    .navbar-inner { background:  }

    nav ul { padding-left: 0; }

    nav ul li { float: left; list-style: none; font-size: 20px; }

    nav ul li a { color: white; margin: 18px; padding: 18px; display: block; }

    nav ul li a:hover { color: #ff3300; transition: color 0.7s ease-in; }

Answer 1

您的图片不在 li 标记中， a 标记未关闭。 这是工作代码：

<div class="nav-container">
    <nav class="container">
      <ul>
        <li><a href="#" class="pull-left"><img src="images/kphr.png" alt="KPHR"></a></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About KPHR Solutions</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="candidates.html">Candidates</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
      <div class="clear"></div>
    </nav>
  </div>

为避免增加导航栏大小，因为包含徽标的li上有填充和边距，您应该添加此css：

nav ul li a.pull-left { margin: 0; padding: 0; display: block; }

调整边距和 paddings 以获得所需的结果。