水平对齐无序列表旁边的图像答案

【问题标题】：Aligning an image next to an unordered list horizontally水平对齐无序列表旁边的图像
【发布时间】：2017-05-05 23:02:14
【问题描述】：

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

这是正在发生的事情：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;
}

【问题讨论】：

标签： html css web navigation

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试在 CSS 中使用 float 属性。这将允许元素并排显示。

将float:left; 行添加到#home-button 的CSS，并将float:right 添加到您的无序列表中。

【讨论】：