NavBar h1元素卡在顶部
[英]NavBar h1 element stuck on top
问题描述
I want my nav bar to have the h1 element and li element to stick to the bottom. 
我希望我的导航栏具有h1元素和li元素以保持底部。 My h1 element is stuck to the top when I want it to be on the bottom like my li elements. 当我希望h1元素像li元素一样位于底部时，它会卡在顶部。 I have the image pasted down below along with the code. 我将图像和代码粘贴到下面。
body{ margin:0; padding:0; display:block; background-color:#abb2bc; } .container{ } #Home{ font-size:20px; display: inline; text-align:center; } main ::after{ content:""; display:table; clear:both; } .nav{ background-color: #363b42; font-family: 'Roboto Slab',serif; } .nav a:hover{ color:#29703f; text-decoration: overline; font-size:22px; } .nav a{ text-decoration: none; color:black; font-size: 20px; text-transform: uppercase; } .nav ul{ margin:0; list-style: none; float: right; display: inline; padding:0px; } header ::after { content:""; display:table; clear:both; } .nav li{ display: inline-block; margin-left: 75px; padding-right: 25px; padding-top: 30px; text-align:center; } .nav h1{ float:left; }
<!DOCTYPE html> <html> <head> <title>Fortnite Tips</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- Navigation bar --> <header class="container"> <div class="nav"> <a><h1 id="Home">GamingCoachBlog</h1></a> <ul> <li><a href="#">About</a></li> <li><a href="#">Contact<a /></li> </ul> </div> </header> </body>
If you could explain why this isn't working I would appreciate it. 如果您能解释为什么这行不通，我将不胜感激。 I have been stuck on this for a while as I am still learning how to make responsive websites. 我一直在学习这一点，因为我仍在学习如何制作响应式网站。
2 个解决方案
解决方案1
0 已采纳 2019-03-03 19:41:08
Try to make <h1> inside <ul> like below : 尝试在<ul>内制作<h1>如下所示：
<ul>
<li><a><h1 id="Home">GamingCoachBlog</h1></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact<a /></li>
</ul>
and delete this rule in your css float:left; 并在css float:left;删除此规则float:left;
解决方案2
0 2019-03-03 19:44:47
Two issues 两个问题
The space between
header ::afterapplies the style after every child element of header.header ::after之间的空格将样式应用于header ::after每个子元素之后。You should clearfix .nav, not the header.
您应该清除.nav，而不是标题。
So make it: 所以做到：
.nav::after {
content: "";
display: table;
clear: both;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.