將鏈接對齊到導航欄底部

我很難按照預期使鏈接位於導航欄底部。我嘗試了所有我能想到的技巧，大多數都沒有明顯的效果。在下面的示例代碼中顯示了似乎做任何事情的一件事，但它重疊了我所有的鏈接，我不知道如何解決這個問題。任何建議如何解決這個問題或更好的方式來做到這一點非常感謝。將鏈接對齊到導航欄底部

<!DOCTYPE html> 
<html> 

<head> 

    <title></title> 

     <style> 
* { 
    margin: 0; 
    padding:0; 
} 

.wrapper { 
    background-color:green; 
    height: 400px; 
} 

.navbar { 
    position: relative; 
    height: 50px; 
} 

.navbar a { 
    position: absolute; 
    bottom: 0; 
} 
     </style> 
</head> 

<body> 
    <div class="wrapper"> 
     <div class="navbar"> 
      <a href="">link</a> 
      <a href="">link</a> 
      <a href="">link</a> 
      <a href="">link</a> 
     </div> 
    </div> 
</body> 
<html>

來源

2015-04-25 Andrew Wilson

css與定位有點挑剔。您首先需要給父容器一個位置類型。然後，子容器將根據這一點進行跟蹤。

* { 
margin: 0; 
padding:0; 
} 

.wrapper { 
    background-color:green; 
    height: 400px; 
    position: relative; 
} 

.navbar { 
    position: absolute; 
    bottom:0; 
    height: 50px; 
} 

.navbar a { 
}

來源

2015-04-25 02:57:53 Liquidchrome

將鏈接對齊到導航欄底部

回答

相關問題