html - 在 HTML 元素的导航栏中编码 Logo 时出现问题

Question

我是 HTML 和 CSS 新手，正在尝试构建主页。

我已将 Logo 编码到导航栏，但这样做时主页的 a href 已倾斜。

请查看屏幕截图。!

这是因为我没有在 div 中编码 Logo 或编写clearfix 吗？

我可以寻求帮助来解决这个问题，以便美观。

My 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>

my 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>

为了避免增加导航栏大小，由于包含 Logo 的 li 上有填充和边距，您应该添加以下 css:

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

调整边距和内边距以获得您想要的结果。