我发现很难首先将标签分开,然后在顶部导航栏的面板上均匀分开。
如您所见,我已经使用了 
实体,我认为这是一个糟糕的解决方案。
h1 {
color:#D68910;
font-family:'verdana';
margin:25px;
margin-top:25px;
}
h6 {
color: #FFC300;
font-family:'verdana';
margin: 38px;
margin-top: 15px;
}
.header {
padding: 15px;
background-color: #333;
overflow: hidden;
}
body {
background-color: #454545;
}
.topnav {
background-color: #333;
overflow: hidden;
display: block;
padding: 14px 16px;
font-family:'verdana';
font-size: 17px;
margin-right: 40px;
margin: 25px;
margin-top: 15px;
}
.topnav a {
float: left;
color: gray;
}
.topnav a:hover {
background-color: #454545;
color: white;
padding: 2px 4px;
display: block;
}
.topnav a.active {
background-color: #4CAF50;
color: #D68910;
}
p {
}

<!DOCTYPE html>
<title>My Name</title>
<br />
<br />
<br />
<div class="header" id="myHeader">
<h1>My Name</h1>
<h6>Bioinformatician</h6>
</div>
<div class="topnav" id="myTopnav">
<li><a href="#home" style="text-decoration:none">Home </a></li>
<li><a href="#news" style="text-decoration:none">Blog </a></li>
<li><a href="#contact" style="text-decoration:none">About me </a></li>
<li><a href="#about" style="text-decoration:none">Contact </a></li>
</div>
<body> </body>
&#13;
答案 0 :(得分:1)
最简单的方法是使用对齐方式。我已经删除了浮点数,使用display:inline-block并添加了一个:after伪元素后导致导航中的第二行(不可见)才能启动。
h1 {
color:#D68910;
font-family:'verdana';
margin:25px;
margin-top:25px;
}
h6 {
color: #FFC300;
font-family:'verdana';
margin: 38px;
margin-top: 15px;
}
.header {
padding: 15px;
background-color: #333;
overflow: hidden;
}
body {
background-color: #454545;
}
.topnav {
background-color: #333;
overflow: hidden;
display: block;
padding: 14px 16px;
font-family:'verdana';
margin-right: 40px;
margin: 25px;
margin-top: 15px;
list-style:none;
text-align:justify;
font-size:0;
}
.topnav:after{
content:" ";
width:100%;
height:0;
display:inline-block;
line-height:0;
}
.topnav li {
display:inline-block;
font-size: 17px;
}
.topnav a {
color: gray;
}
.topnav a:hover {
background-color: #454545;
color: white;
padding: 2px 4px;
display: block;
}
.topnav a.active {
background-color: #4CAF50;
color: #D68910;
}
p {
}
<title>My Name</title>
<br />
<br />
<br />
<div class="header" id="myHeader">
<h1>My Name</h1>
<h6>Bioinformatician</h6>
</div>
<ul class="topnav" id="myTopnav">
<li><a href="#home" style="text-decoration:none">Home</a></li>
<li><a href="#news" style="text-decoration:none">Blog</a></li>
<li><a href="#contact" style="text-decoration:none">About me</a></li>
<li><a href="#about" style="text-decoration:none">Contact</a></li>
</ul>