时间戳

首页 > 解决方案 > CSS-无法对齐文本

html - CSS-无法对齐文本

问题描述

.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/

标签： htmlcsstagselement

解决方案

试试这个代码

<!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>

推荐阅读