Изображение слева и текст справа на панели навигации

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

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

(Просмотреть в полноэкранном режиме)