Question

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

  <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从同一行的徽标底部开始。

Answer 1

添加

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

将菜单项放在一行上。

然后放置在图像添加的右侧。

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

并删除或更正菜单选择器下的左边距规则。

Answer 2

徽标下的菜单

DEMO

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

我认为你需要这个

UPDATED DEMO

#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:0px;
   background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%);
   width:500px;
   margin-left:0px;
   }
#menu ul{

    display:inline-block;


}

#menu ul li{

      display:inline-block;

}

updated again

Answer 3

<强>尝试：

#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;
  float: left;

} 要使菜单与图片位于同一行，请使用float: left;

要使同一行中的列表使用display: inline-block;

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

Answer 4

DEMO

 #logo {    
    float: left;
  }

#menu { 
   margin-left: 0px;
}

如何在div底部对齐内容？

4 个答案: