HTML CSS examples for CSS Widget:UL Horizontal
Horizontally center this ul inside div
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #geometric-nav {<!--from ww w. j a v a 2 s .com--> background:Chartreuse; height:41px; width:100%; margin-top:11px; text-align:center; } .template-column-2 #my li { margin-left:16px; list-style:none; display:inline-block; } </style> </head> <body> <div id="geometric-nav" class="left template-column cfix template-column-2" sort_key="nav"> <div class="geometric-nav-wrap cfix" style=""> <ul id="my" class="nav-links expandable"> <li class="page page-1 page-work" page_id="1" nav-link="true" nav_link_tmpl="true" style="display: none;"> <div class="nav-link-container"> <a href="/1/gallery" class="nav-link visited selected">Lorem i</a> </div> </li> <li class="page page-2 page-custom first-child" page_id="2" nav-link="true" nav_link_tmpl="true"> <div class="nav-link-container"> <a href="/2/about" class="nav-link visited">Lorem</a> </div> </li> <li class="page page-3 page-custom last-child" page_id="3" nav-link="true" nav_link_tmpl="true"> <div class="nav-link-container"> <a href="/3/contact" class="nav-link">Lorem i</a> </div> </li> <li class="page page-4 page-resume" page_id="4" nav-link="true" nav_link_tmpl="true" style="display: none;"> <div class="nav-link-container"> <a href="/4/resume" class="nav-link">Lorem </a> </div> </li> </ul> </div> </div> </body> </html>