How do I get this list to be seperated by a tab? (HTML/CSS) -
How do I get this list to be seperated by a tab? (HTML/CSS) -
so i've started html/css, , decided start simple, nav bar. thing tutorials online go point (below code) , completely ignore how set space between each list item. i've tried adding width, makes uneven space. please show me how this? thanks!
here's code; working model here
html:
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="bannercontent"> <ul id="banner"> <li id="bannerlinks"><a id= "links" href="#">what </a></li> <li id="bannerlinks"><a id= "links" href="#"> pricing </a></li> <li id="bannerlinks"><a id= "links" href="#"> contact </a></li> <li id="bannerlinks"><a id= "links" href="#"> wholesale</a></li> </ul> </div> </body> </html>
css:
@import url(http://fonts.googleapis.com/css?family=quicksand:300); #bannercontent{ font-family: 'quicksand:300'; text-align: center; font-size: 25px; } #banner{ list-style-type: none; margin: 0; padding: 0; } #links{ text-decoration: none; } #bannerlinks { display: inline; }
use margin value on li elements:
li { margin-right: 20px; }
this add together space of 20px between li elements.
demo
please note: id
s supposed unique, class
es made adding same style similar elements, instead of <li id="bannerlinks">
should <li class="bannerlinks">
. in css need update #bannerlinks
.bannerlinks
.
html css
Comments
Post a Comment