html - 如何对齐 div 底部的内容？

Question

我一直在尝试将我的菜单 div 对齐在我的 Logo div 的底部，与我的标题内的 Logo 在同一行。

  <div id="header">
            <div id="top-bar">
            </div>
            <div id="clear"></div>
            <div id="logo">
                <img id="logoimg" src="images/KTMLogo.png" />
            </div>
            <div id="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Movies</a></li>
                    <li><a href="#">Theaters</a></li>
                </ul>
            </div>
        </div>

CSS

  #header {
   background-color:#e1874b;
   border-bottom-left-radius:25px;
   border-bottom-right-radius:25px;
   float:left;
   position:relative;
  } 

  #logo {
   width:280px;
  }

  #logo img {
   max-height:240px;
   max-width:240px;  
  }

  #menu { 
   font-size:18px;
   padding:20px;
   background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%);
   width:500px;
   margin-left:300px;
   }

我希望我的菜单 div 在同一行中从我的 Logo 底部开始。

Answer 1

添加

#menu ul li {
    display:inline-block;
}

将菜单项放在一行中。

放置然后在图片右侧添加。

#menu,#logo {
    display:inline-block;
}

并删除或更正菜单选择器下的 margin-left 规则。