2
В настоящее время я пытаюсь создать раздел заголовка в HTML, который содержит изображение логотипа и список, который используется в качестве меню навигации. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда я даю определенную высоту списку (эквивалентную высоте изображения), высота списка идет вниз против изображения, и я хочу быть на одной линии и текст списка посередине. Ниже приведен фрагмент кода моей страницы.Выравнивать изображение и список на той же строке в html
.header-section>img
{
display:inline-block;
padding:10px;
background-color:yellow;
}
.navigation,.navigation ul
{
list-style:none;
}
.navigation
{
background-color:red;
display:inline-block;
}
.navigation>li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}<!--Header section-->
<div class="header-section">
\t <img src="images/logo/logo.png" alt="logo" width="90px" height="30px">
\t <!--Navigation section-->
\t <ul class="navigation">
\t \t <li><a href="#">Home</a></li>
\t \t <li class="sub-menu">
\t \t \t <a href="#">About ▼</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">The Company</a></li>
\t \t \t \t <li><a href="#">The Founders</a></li>
\t \t \t \t <li><a href="#">The Team</a></li>
\t \t \t \t <li><a href="#">The Mission</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li class="sub-menu">
\t \t \t <a href="#">Products ▼</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Solar Panels</a></li>
\t \t \t \t <li><a href="#">Solar Lamps</a></li>
\t \t \t \t <li><a href="#">Solar Heaters</a></li>
\t \t \t \t <li><a href="#">Solar Cookers</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li class="sub-menu">
\t \t \t <a href="#">Services ▼</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Solar Equipment Repair</a></li>
\t \t \t \t <li><a href="#">Installation</a></li>
\t \t \t \t <li><a href="#">Maintenance</a></li>
\t \t \t \t <li><a href="#">Training</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li class="sub-menu">
\t \t \t <a href="#">Support ▼</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Training</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li class="sub-menu">
\t \t \t <a href="#">Contact ▼</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Email Us</a></li>
\t \t \t \t <li><a href="#">Contact Form</a></li>
\t \t \t </ul>
\t \t </li>
\t </ul>
\t <!--Social Icons-->
\t <img src="images/icons/twitter.png">
\t <img src="images/icons/facebook.png">
\t <img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
возможно дубликат [CSS Выравнивание ссылку рядом с изображением] (http://stackoverflow.com/questions/11935565/css-alignment-of-a-link-next -to-an-image) – Aziz
поместите свое меню логотипа и т. д. в таблицу -> td tag –
ваш вопрос непонятен мне, но я думаю, вам нужно добавить «margin: 0;» для '.navigation' – Pedram