CODEWITHSUNDEEP
htmlcsstagselement
Ohboyy
Ohboyy

Reputation: 15

CSS- cant align text in line

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

When I run this code the part for Album does not align like how it does with artist. Not really sure why

Demo: http://jsfiddle.net/524jo8kt/1/

Upvotes: 0

Views: 49

Answers (1)

MANGESH SUPE
MANGESH SUPE

Reputation: 19

try this code

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

Upvotes: 1

Related Questions