html - 导航栏中左侧的图像和右侧的文本

Question

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

      .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;
      }

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

我想要我的图片在左边，列表项在右边，文本垂直对齐，有人能帮我吗？ This is an image I designed on Word, this is my hopeful end point

Answer 1

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

.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;
}

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

(全屏查看)