將導航欄放在精確位置

我希望導航欄位於右下角（位於標題欄中）。將導航欄放在精確位置

我不想引導解決方案，但我只希望它與純CSS和HTML。謝謝:)

代碼：

header { 
 
    background: #1abc9c; 
 
    height: 150px; 
 
} 
 
nav { 
 
    float: right; 
 
    padding: 130px 0px 90px 0px; 
 
} 
 
nav ul {} nav ul li { 
 
    float: left; 
 
    padding: 0px 0px 50px 0px; 
 
    list-style: none; 
 
    padding: 3px; 
 
} 
 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 180%; 
 
} 
 
nav > a:hover { 
 
    text-decoration: underline; 
 
    color: white; 
 
}

<body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#"><b>Home</b></a> 
 
     </li> 
 
     <li><a href="#"><b>About</b></a> 
 
     </li> 
 
     <li><a href="#"><b>Portfolio</b></a> 
 
     </li> 
 
     <li><a href="#"><b>Contact</b></a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
    <section id="first"> 
 
    </section> 
 
    <section id="second"> 
 
    </section> 
 
    <section id="third"> 
 
    </section> 
 
    <section id="fourth"> 
 
    </section> 
 
    <footer> 
 
    </footer> 
 
</body>

來源

2015-08-29 kh med

修改CSS規則如下。這將工作

header { 
    background: #1abc9c; 
    height: 150px; 
    position: relative; 

} 
nav { 
    right: 0; 
    position: absolute; 
    bottom: 0; 
} 
nav ul { 
    position: relative; 
    bottom: 0px; 
} 
nav ul li { 
    float: left; 
    padding: 0px 20px 0px 0px; 
    list-style: none; 
} 

nav a { 
    color:#FFF; 
    text-decoration:none; 
    display:block; 
    font-size:180%; 
    } 
nav a:hover{ 
    text-decoration:underline; 
    color:white; 
} 
    clear{ 
    clear:both; 
    } 
    #first{ 
    float:left; 
    background:#f1c40f; 
    height:400px; 
    } 
    #second{ 
    float:left; 
    background:#f1c40f; 
    height:400px; 
    } 
    #third{ 
    float:left; 
    background:#f1c40f; 
    height:400px; 
    } 
    #fourth{ 
    float:left; 
    background:#f1c40f; 
    height:400px; 
    }

來源

2015-08-29 05:07:02

它的工作我很感激，但鏈接的顏色不再是白色 –

你必須包括你已經爲'了'定義的CSS。我沒有在我的回答中提到，因爲這是正確的，沒有變化 –

我沒有刪除爲'a'定義的css –

將導航欄放在精確位置

回答

相關問題