.hiphop{
width: 900px;
border: 2px solid black;
list-style-type: none;
margin: 5px 10px 10px;
overflow: auto;
}
.hiphop .hartist{
word-spacing: 5cm;
border-bottom: 1px solid black;
}
.hiphop .halbum{
word-spacing: 5cm;
border-bottom: 1px solid black;
}<div class=hiphop>
<h4>HIPHOP</h4>
<p class="hartist">
<a href="#">Artist</a>
<a href="#">Discussion</a>
<a href="#">Comments</a>
<a href="#">Latest</a>
</p>
<p class="halbum">
<a href="#">Album</a>
<a href="#">Discussion</a>
<a href="#">Comments</a>
<a href="#">Latest</a>
</p>
</div>当我运行这个代码时，专辑的部分并不像它和艺术家一样对齐。不太确定的原因
演示：http://jsfiddle.net/524jo8kt/1/
尝试此代码
<!DOCTYPE html>
<html>
<style>
#navigation {
background-color: #fff;
height:100px;
position: relative;
border:3px solid red;
padding:4px;
}
li{
margin: 0;
width:20%;
text-align:center;
height:25px;
padding: 0;
margin:2px;
background-color:silver;
border: 0;
list-style: none;
line-height: 1;
display: inline;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;}
.
</style>
<body>
<div id="navigation">
<ul class="navbar1">
<li><a href="#">Artist</a> </li>
<li> <a href="#">Discussion</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Latest</a></li>
</ul>
<br>
<ul class="navbar2">
<li><a href="#">Album</a> </li>
<li><a href="#">Discussion</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Latest</a></li>
</ul>
</div>
</div>
</body>
</html>