导航栏中

Question

我的网站顶部有一个导航栏。我无法将图像左侧对齐，而右侧列表项也是如此。这是我的代码......

＆＃13;

＆＃13;

      .nav a li {
        color: white;
        font-family: arial;
        font-weight: 600;
        font-size: 12px;
        margin-right: 15px;
        display: inline-block;
        vertical-align: center;
      }
      .nav {
        padding-bottom: 5px;
        padding-top: 5px;
        margin: 0;
        text-align: left;
        vertical-align: center;
      }
      #top {
        background-color: #0052cc;
        height: auto;
      }
      #Homeimage {
        height: 60px;
        width: 60px;
        padding-left: 40px;
        padding-top: 10px;
        display: block;
        text-align: left;
      }

＆＃13;

<div id="top">
  <div class="nav">
    <div class="navbar">
      <ul id="navigation">
        <a href="index.html">
          <li>
            <img src="file:///Users/Luke/Documents/STFCYouth/Images/shrewsbury%20logo.png" ; id="Homeimage">
          </li>
        </a>
        <a href="acadmey.html">
          <li>ACADEMY</li>
        </a>
        <a href="youth.html">
          <li>YOUTH</li>
        </a>
        <a href="pre-acadmey.html">
          <li>PRE-ACADEMY</li>
        </a>
        <a href="contact.html">
          <li>CONTACT</li>
        </a>
        <a href="newsEvents.html">
          <li>NEWS AND EVENTS</li>
        </a>
        <a href="sportsScience.html">
          <li>SPORTS SCIENCE</li>
        </a>
        <a href="vacancies.html">
          <li>VACANCIES</li>
        </a>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望我的图片在左边，列出右边的项目，文字垂直对齐，任何人都可以帮助我吗？This is an image I designed on Word, this is my hopeful end point

Answer 1

在单独的div中包裹Navigaiton链接并使用float:right;

＆＃13;

＆＃13;

.nav a li {
  color: white;
font-family: arial;
font-weight: 600;
font-size: 12px;
margin-right: 15px;
display: inline-block;
vertical-align: center;
}
.nav {
padding-bottom: 5px;
padding-top: 5px;
margin: 0;
text-align: left;
vertical-align: center;
}
#top {
background-color: #0052cc;
height: auto;
}
#Homeimage {
height: 60px;
width: 60px;
padding-left: 40px;
padding-top: 10px;
display: block;
text-align: left;
}
#navright{
float:right;
margin-top:20px;
}

＆＃13;

<div id="top">
<div class="nav">
    <div class="navbar">
    <ul id="nagigation">
        <a href="index.html"><li><img src="file:///Users/Luke/Documents/STFCYouth/Images/shrewsbury%20logo.png"; id="Homeimage"></li></a>
        <div id="navright">
            <a href="acadmey.html"><li>ACADEMY</li></a>
            <a href="youth.html"><li>YOUTH</li></a>
            <a href="pre-acadmey.html"><li>PRE-ACADEMY</li></a>
            <a href="contact.html"><li>CONTACT</li></a>     
            <a href="newsEvents.html"><li>NEWS AND EVENTS</li></a>
            <a href="sportsScience.html"><li>SPORTS SCIENCE</li></a>
            <a href="vacancies.html"><li>VACANCIES</li></a>
        </div>
    </ul>
    </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

（全屏查看）