Невозможно выровнять логотип с помощью navbar

Я довольно новичок в веб-разработке, и я пытался создать сайт, до сих пор мне удалось сделать меню навигации и логотип. Моя проблема в том, что после тщательного тестирования многих учебных материалов и сообщений я не смог решить проблему. Я хочу выровнять свой логотип со своей навигационной панелью так, чтобы логотип находился слева, а навигационная панель соответствует логотипу, но с правой стороны, причем обе они расположены рядом друг с другом. следующие вопросы: как создать раскрывающееся меню для некоторых вкладок на панели навигации? ThankyouНевозможно выровнять логотип с помощью navbar

Мой HTML выглядит следующим образом

<!DOCTYPE html> 
<html> 
<head> 
<title>S3ntry Aust Transport</title> 
<link href="navbarlog.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="container" id="Layout1" style="overflow: auto; "> 
<header> 
<div id="menu"> 
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" 

height="176" id="logo"></a> 
</div> 
</header> 
<ul> 
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li> 
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li> 
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li> 
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li> 
<li><a id="nav-latestnews" href="#">Latest News</a></li> 
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html>

и CSS часть выглядит следующим образом

ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li  
{float:left;} 
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px 
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text- 
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text- 
transform:uppercase; letter-spacing:.08em} 
ul li a:hover {background-color:#3b6a85; color:#a2becf} 
ul li a.first {border-left:0} 
ul li a.last {border-right:0}} 

#header ul li { 
list-style: none; 
display:inline-block; 
float:right 
} 

logo.JPG 
{ 
vertical-align:middle; 
float:left 
}

источник

2013-07-20 Wishhasad Somawansa

Переименуйте свой 'logo.JPG' в CSS в' .logo', а затем отредактируйте обертку изображения на ''. Решает ли это какие-либо проблемы? В качестве побочной заметки, но не связанной с ней, удалите '' из кода, с этого не началось. –

Если вы реструктурировать свой HTML, перемещая 'уль' в заголовке, это очень просто.

<header> 
    <div id="logo"> 
     <img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo"> 
    </div> 
    <div id="menu"> 
     <ul> 
      <li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li> 
      <li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li> 
      <li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li> 
      <li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li> 
      <li><a id="nav-latestnews" href="#">Latest News</a></li> 
      <li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li> 
     </ul>  
    </div> 
</header>

и CSS нужен

header { width: 700px; } 

#logo { float: left; } 

#menu { float: right; } 
#menu ul { padding: 0; margin: 0; }

Вот это JSFiddle показывая его работать: http://jsfiddle.net/STu89/

Я также удалил, который не был открыт и раздел различные/дела, которые weren Совпадение.

источник

2013-07-20 03:39:12 stefancarlton

у вас есть два '# логотипа 'в вашем HTML – rolory

Невозможно выровнять логотип с помощью navbar

ответ

Смежные вопросы