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: ids supposed unique, classes made adding same style similar elements, instead of <li id="bannerlinks"> should <li class="bannerlinks">. in css need update #bannerlinks .bannerlinks.

html css

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -