html - How do I make my list horizontal -
i need make list appear horizontal @ center of web page.
this code:
.list-group { clear: both; display: inline-block; content: ""; padding-right: 50px; padding-left: 50px; }
<div> <ul class="list-group"> <li class="list-group-item">home</li> <li class="list-group-item">about us</li> <li class="list-group-item">gallery</li> <li class="list-group-item">contact us</li> <li class="list-group-item">students eportal</li> </ul> </div>
i tried above code not working.
its display: table;
gets job done.
#menu-outer { height: 84px; } .table { display: table; /* allow centering work */ margin: 0 auto; } ul#list-group { min-width: 696px; list-style: none; padding-top: 20px; } ul#list-group li { display: inline; }
<div id="menu-outer"> <div class="table"> <ul id="list-group"> <li class="list-group-item">home</li> <li class="list-group-item">about us</li> <li class="list-group-item">gallery</li> <li class="list-group-item">contact us</li> <li class="list-group-item">students eportal</li> </ul> </div> </div>
Comments
Post a Comment