帶標誌的底部對齊菜單？

-2

我是網絡開發新手，我正在使用HTML和CSS的網站上工作。我的菜單有問題，我希望它與我的日誌在水平底部對齊，但它似乎是在頂部對齊。帶標誌的底部對齊菜單？

這是我的代碼，請提出解決方案。

HTML：

<hgroup> 
    <div id="Head"> 
     <img src="img/logo.png" width="380" height="100" alt="Logo" /> 
    </div> 
    <div id="navcontainer"> 
     <ul> 
      <li><a href="#">HOME</a> 
      </li> 
      <li><a href="#">ABOUT</a> 
      </li> 
      <li><a href="#">PROJECTS</a> 
      </li> 
      <li><a href="#">GALLERY</a> 
      </li> 
      <li><a href="#">CONTACT</a> 
      </li> 
     </ul> 
    </div> 
</hgroup>

CSS：

#Head { 
    float:left; 
    margin-left:120px; 
    margin-right:150px; 
    width:200px; 
    height:150px; 
} 
/*------------------------*/ 
#navcontainer { 
    margin-top: 50px; 
} 
#navcontainer ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
} 
#navcontainer ul li { 
    display: inline; 
} 
#navcontainer ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color:#000; 
    font-size:18px; 
} 
#navcontainer ul li a:hover { 
    color:#008c00; 
}

來源

2014-07-21 user3560735

展現你想 –

另外一個側面說明什麼視覺小品，你的頭在CSS設置爲寬度：200像素，但你的圖像大小爲380px ？ – Doug

我很困惑。你問我們，你想要菜單低於標誌？或者你想在它下面而不是旁邊或上面對齊？無論如何，我建議你應該使用你的標誌作爲CSS中的背景圖片，而不是將其稱爲圖片。它可以防止問題。 –

你可以嘗試像

<div class="header_container"> 
    <div id="Head"> 
    <img src="img/logo.png" width="380" height="100" alt="Logo" /> 
    </div> 
    <div class="navcontainer"> 
     <div id="nav"> 
     <ul> 
      <li><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT</a></li> 
      <li><a href="#">PROJECTS</a></li> 
      <li><a href="#">GALLERY</a></li> 
      <li><a href="#">CONTACT</a></li> 
     <ul> 
     </div> 
    </div> 
</div>

CSS：

.header_container { 
    position:relative; 
} 
#Head 
{ 
    margin-left:120px; 
    margin-right:150px; 
    width:200px; 
    height:150px; 
    background: red; 
    float:left; 
} 
/*------------------------*/ 
.navcontainer { 
    position: relative; 
    height:150px; 
    float: left; 
} 
#nav { 
    background: green; 
    position:absolute; 
    bottom: 0; 
    height: auto; 
    width: 600px; 
} 

#nav ul{ 
    margin: auto 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
    position: relative; 
} 
#nav ul li { 
    position: relative; 
    display: inline; 
    height: auto; 
    bottom: 0; 
    margin: auto 0; 
} 
#nav ul li a{ 
    text-decoration: none; 
    padding: .2em 1em; 
    color:#000; 
    font-size:18px; 
} 
#nav ul li a:hover{ 
    color:#008c00; 
}

JSFiddle

但是..它不是一個很好的html/css。我建議你學習Bootstrap framework。它可以幫助您在不費力的情況下構建一個良好的CSS。

來源

2014-07-21 21:46:40

好吧，根據您提供的有限知識和缺乏圖像來支持您的最終結果或目標，我提供了一個沒有任何浮點數和硬編碼維數的示例。這個例子所需要的只是使用display：table-cell;在兩個DIV容器，像這樣：

#Head 
{ 
    display: table-cell; 
    height:150px; 
} 

#navcontainer{ 
    display: table-cell; 
}

這裏是一個工作示例： http://plnkr.co/edit/NI2AXivXYKnXI2RJOnnh?p=preview

澄清度和你所要完成將幫助您更好地向前發展的目標更加清晰。

來源

2014-07-21 21:50:36

如果我沒有記錯ie8中有一些表格單元問題... –

與IE8相關 - 「如果display：table-cell元素的父容器有一個顯示：表格屬性（和表格佈局：固定），看到這個例子和這個相關的問題。「 - http://stackoverflow.com/a/15658118 –

這是你期望的樣子嗎？

https://www.facebook.com/photo.php?fbid=10204351601212725&l=ee54079c94

試試這個

<style> 
hgroup{ 
    text-align:center; 
} 

/*------------------------*/ 
#navcontainer { 
    margin-top: 50px; 
} 
#navcontainer ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none;  
} 
#navcontainer ul li { 
    display: inline; 
} 
#navcontainer ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color:#000; 
    font-size:18px; 
} 
#navcontainer ul li a:hover { 
    color:#008c00; 
}</style> 
<hgroup> 
    <div id="Head" > 
     <img src="img/logo.png" width="380" height="100" alt="Logo" /> 
    </div> 
    <div id="navcontainer"> 
     <ul> 
      <li><a href="#">HOME</a> 
      </li> 
      <li><a href="#">ABOUT</a> 
      </li> 
      <li><a href="#">PROJECTS</a> 
      </li> 
      <li><a href="#">GALLERY</a> 
      </li> 
      <li><a href="#">CONTACT</a> 
      </li> 
     </ul> 
    </div> 
</hgroup>

來源

2014-07-21 22:12:09

帶標誌的底部對齊菜單？

回答

相關問題