将导航栏放在精确位置

我希望导航栏位于右下角（位于标题栏中）。将导航栏放在精确位置

我不想引导解决方案，但我只希望它与纯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 –

将导航栏放在精确位置

回答

相关问题