在html中的同一行上对齐图像和列表 [英] Align image and list on same line in html
问题描述
当前,我正在尝试在HTML中创建标题部分,其中包含徽标图像和用作导航菜单的列表.我现在面临的问题是,当我给列表指定一定的高度(相当于图像高度)时,列表的高度相对于图像下降,并且我想位于同一行和同一行上在中间的列表中.以下是我页面的代码段.
Currently I am trying to create a header section in HTML, which contains a logo image and a list which is being used as a navigation menu. The problem which I am facing right now is that, when I am giving a certain height to the list(equivalent to image height) the height of the list is going downwards against the image, and I want to be on the same line and text of the list in the middle. The following is the code snippet of my page.
.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">
<img src="images/logo/logo.png" alt="logo" width="90px" height="30px">
<!--Navigation section-->
<ul class="navigation">
<li><a href="#">Home</a></li>
<li class="sub-menu">
<a href="#">About ▼</a>
<ul>
<li><a href="#">The Company</a></li>
<li><a href="#">The Founders</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">The Mission</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Products ▼</a>
<ul>
<li><a href="#">Solar Panels</a></li>
<li><a href="#">Solar Lamps</a></li>
<li><a href="#">Solar Heaters</a></li>
<li><a href="#">Solar Cookers</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Services ▼</a>
<ul>
<li><a href="#">Solar Equipment Repair</a></li>
<li><a href="#">Installation</a></li>
<li><a href="#">Maintenance</a></li>
<li><a href="#">Training</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Support ▼</a>
<ul>
<li><a href="#">Training</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Contact ▼</a>
<ul>
<li><a href="#">Email Us</a></li>
<li><a href="#">Contact Form</a></li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
推荐答案
为图像添加垂直对齐属性
Add a vertical-align attribute to your images
.header-section > img
{
display:inline-block;
padding:10px;
background-color:yellow;
vertical-align: middle;
}
更新:浮动版本
向图像和.navigation添加向左浮动"属性,并将图像"height + padding"设置为等于列表的行高.
Update : Float version
Add a "float left" attribute to your images and .navigation and set an image "height + padding" equal to the line-height of your list.
.header-section
{
overflow: hidden;
}
.header-section > img
{
float: left;
padding:10px;
background-color:yellow;
width: 30px;
height: 30px;
}
.navigation
{
padding: 0;
margin: 0;
float: left;
list-style:none;
}
.navigation
{
background-color:red;
}
.navigation > li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}
<!--Header section-->
<div class="header-section">
<img src="images/logo/logo.png">
<!--Navigation section-->
<ul class="navigation">
<li><a href="#">Home</a></li>
<li class="sub-menu">
<a href="#">About ▼</a>
<ul>
<li><a href="#">The Company</a></li>
<li><a href="#">The Founders</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">The Mission</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Products ▼</a>
<ul>
<li><a href="#">Solar Panels</a></li>
<li><a href="#">Solar Lamps</a></li>
<li><a href="#">Solar Heaters</a></li>
<li><a href="#">Solar Cookers</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Services ▼</a>
<ul>
<li><a href="#">Solar Equipment Repair</a></li>
<li><a href="#">Installation</a></li>
<li><a href="#">Maintenance</a></li>
<li><a href="#">Training</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Support ▼</a>
<ul>
<li><a href="#">Training</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Contact ▼</a>
<ul>
<li><a href="#">Email Us</a></li>
<li><a href="#">Contact Form</a></li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
这篇关于在html中的同一行上对齐图像和列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!