导航栏

Question

HTML和CSS并不是我的主要内容，我更追尾。但我仍然明白它足以制作网站。我正试图在导航栏的左侧显示我的徽标，就像我们在堆栈溢出时看到的那样。但它不会显示，我只是不明白为什么它不会。当我在chrome上检查页面时，我的控制台中没有错误。

HTML：

<header>
    <div class ="nav">      
        <ul>    
            <a href="index.html" <img src="images/logoHeader.png" alt="Backpackers Hostel" id="logo"/>  
            <li><a href="index.html">Home Page</a></li>
            <li><a href="facilities.html">Facilities</a> </li>
            <li><a href="prices.html">Prices</a></li>
            <li><a href="cafe.html">Cafe</a></li>
            <li><a href="gettingHere.html">Getting Here</a></li>
            <li><a href="contactForm.html">Contact Us</a></li>
        </ul>
    </nav>
</header>

CSS：

.nav ul {
  list-style: none;
  background-color: #111;
  text-align: center;
  padding: 2px;
  margin: 0;
  box-shadow: 0px 5px 5px #666666;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}
.nav li {
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #123;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .5s background-color;
}

.nav a:hover {
  background-color: #737373;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1em;
    display: inline-block;
    margin-right: 0px;
  }

#logo{
    float: left;
}

这是我得到的：

Answer 1

最有可能的方式是设置第一个锚标记

<a href="index.html" <img src="images/logoHeader.png" alt="Backpackers Hostel" id="logo"/>

应该是

<li><a href="index.html"><img src="images/logoHeader.png" alt="Backpackers Hostel" id="logo"/></a></li>

请注意代码格式在第一个示例中不起作用。这应该是一个很好的迹象表明事情已经结束。

Answer 2

您的html sintax在该行似乎不正确：

<a href="index.html" <img src="images/logoHeader.png" alt="Backpackers Hostel" id="logo"/> 

尝试这样写：

<li><a href="index.html"> <img src="images/logoHeader.png" alt="Backpackers Hostel" id="logo"/> </a></li>

将所有内容放在<li>内，或将图片放在<ul>标记之外。

你对<div>的封闭也犯了一点错误。正确的代码应该是：

<header>
    <div class ="nav">      
        <ul>    
            <li><a href="index.html"> <img src="images/logoHeader.png" alt="Backpackers Hostel" id="logo"/></a></li>  
            <li><a href="index.html">Home Page</a></li>
            <li><a href="facilities.html">Facilities</a> </li>
            <li><a href="prices.html">Prices</a></li>
            <li><a href="cafe.html">Cafe</a></li>
            <li><a href="gettingHere.html">Getting Here</a></li>
            <li><a href="contactForm.html">Contact Us</a></li>
        </ul>
    </div>
</header>