水平对齐无序列表旁边的图像 [英] Aligning an image next to an unordered list horizontally

问题描述

所以我试图在无序列表旁边放置一个图像(图像充当导航的主页按钮)但是实际列表不断向下移动，当我希望它位于主页图像旁边时.有想法该怎么解决这个吗?

这是正在发生的事情:图像未与列表对齐

<a href="#"><img src="images/home_button.png" alt="表示主页图标的图像" id="home_button"></a><ul><li><a href="#">歌剧魅影</a></li><li><a href="#">狮子王</a></li><li><a href="#">Wicked</a></li><li><a href="#">预订</a></li><li><a href='#'>位置</a></li>

<小时>

#navigation {高度:50px；宽度:100%；背景色:#2F4E6F；}#navigation li a {文字装饰:无；font-family: 'Open Sans';字体大小:25px；颜色:#FFFFFF；}#navigation li a:hover {颜色:#7c7f84；边框底部:纯黑色 2px；}#导航李{列表样式类型:无；显示:内联块；填充:0 10px；背景颜色:红色；}#home_button {宽度:45px；高度:45px；显示:内联块；左边距:10px；边距顶部:2px；}

解决方案

您可以将 display: flex 添加到父级，它会将它们放在一个 flex 行中.

#navigation {高度:50px；宽度:100%；背景色:#2F4E6F；显示:弹性；}#navigation li a {文字装饰:无；font-family: 'Open Sans';字体大小:25px；颜色:#FFFFFF；}#navigation li a:hover {颜色:#7c7f84；边框底部:纯黑色 2px；}#导航李{列表样式类型:无；显示:内联块；填充:0 10px；背景颜色:红色；}#home_button {宽度:45px；高度:45px；显示:内联块；左边距:10px；边距顶部:2px；} 

<a href="#"><img src="images/home_button.png" alt="表示主页图标的图像" id="home_button"></a><ul><li><a href="#">歌剧魅影</a></li><li><a href="#">狮子王</a></li><li><a href="#">Wicked</a></li><li><a href="#">预订</a></li><li><a href='#'>位置</a></li>

So i'm trying to have an image alongside an unordered list (image acting as home button for the navigation) however the actual list keep shifting down, when I want it to be next to the home image. Any ideas on how to fix this?

This is what's happening: Image not aligned with the list

<div id="navigation">
<a href="#"><img src="images/home_button.png" alt="Image representing a home icon" id="home_button"></a>
    <ul>
        <li><a href="#">Phantom of the Opera</a></li>
        <li><a href="#">The Lion King</a></li>
        <li><a href="#">Wicked</a></li>
        <li><a href="#">Bookings</a></li>
        <li><a href='#'>Location</a></li>
    </ul>
</div>

---

#navigation {
    height: 50px;
    width: 100%;
    background-color: #2F4E6F;
}

#navigation li a {
    text-decoration: none;
    font-family: 'Open Sans';
    font-size: 25px;
    color: #FFFFFF;
}

#navigation li a:hover {
    color: #7c7f84;
    border-bottom: solid black 2px;
}

#navigation li {
    list-style-type: none;
    display: inline-block;
    padding: 0 10px;
    background-color: red;
}

#home_button {
    width: 45px;
    height: 45px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 2px;
}   

解决方案

You can add display: flex to the parent and it will put them in a flex row.

#navigation {
    height: 50px;
    width: 100%;
    background-color: #2F4E6F;
  display: flex;
}

#navigation li a {
    text-decoration: none;
    font-family: 'Open Sans';
    font-size: 25px;
    color: #FFFFFF;
}

#navigation li a:hover {
    color: #7c7f84;
    border-bottom: solid black 2px;
}

#navigation li {
    list-style-type: none;
    display: inline-block;
    padding: 0 10px;
    background-color: red;
}

#home_button {
    width: 45px;
    height: 45px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 2px;
}   

<div id="navigation">
  <a href="#"><img src="images/home_button.png" alt="Image representing a home icon" id="home_button"></a>
  <ul>
    <li><a href="#">Phantom of the Opera</a></li>
    <li><a href="#">The Lion King</a></li>
    <li><a href="#">Wicked</a></li>
    <li><a href="#">Bookings</a></li>
    <li><a href='#'>Location</a></li>
  </ul>
</div>

这篇关于水平对齐无序列表旁边的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！