andostini Posted December 24, 2013 Share Posted December 24, 2013 Hey Guys, I want an horizontal menue to be centered. The different <li>-tags Have an variable width. Here is an example page: http://www.berkemann.com/ : Here is an example code: <div id="navi"> <ul> <li>Home</li> <li>BiBaBo</li> <li>Tesssst<li> <li>Beeeep</li> </ul></div> #navi { width: 990px; margin: 0 auto; }ul { list-style: none;}ul li { float: left; padding: 20px; border-left: solid 1px;} Of course it would work with width: 25%; but I have an variable amount of list-items and I want the margin between items to be the same. I would be very glad about your help. andostini Link to comment Share on other sites More sharing options...
scout1idf Posted December 24, 2013 Share Posted December 24, 2013 If I understood what you were asking, try this..... <!DOCTYPE HTML><html><head> <title>centred horizontal navigation</title><style type="text/css">/*<![CDATA[*/#navi { width: 990px; margin: 0px auto;} ul { list-style: none; margin:0px auto; text-align:center;}ul li { padding: 20px; border-left:1px solid black; display:inline-block;}li:nth-child(1){ /*remove left border on the first li*/ border-left:0px;}/*]]>*/</style></head><body> <div id="navi"> <ul> <li>Home</li> <li>Page Two</li> <li>Page Three</li> <li>Page Four</li> <li>Page Five</li> <li>Page Six</li> </ul> </div></body></html> Link to comment Share on other sites More sharing options...
andostini Posted December 25, 2013 Author Share Posted December 25, 2013 It worked. Thanks a lot Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now