Question

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

<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;
}

Answer 1

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

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

Answer 2

您可以将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 个答案: