How do I make my list horizontal

Question

I need to make my list appear horizontal at the center of my web page.

This is my 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 but it is not working.

Answer 1

Its display: table; that gets the job done.

 #menu-outer { height: 84px; } .table { display: table; /* Allow the centering to 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> 

Answer 2

Try this:

 .list-group { list-style: none; } .list-group-item { display: inline; } 

 <div id="menu"> <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> 

Answer 3

Use margin: 0 auto to center container that holds menu, use float or display:inline to show your menu items inline.

 div { width: 80%; margin: 0 auto; min-width: 720px; } ul { list-style: none; } li { float: left; padding: 0 5%; border: 1px solid black; } 

 <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> 

Answer 4

Is this what you need ? please take a look at this

 .menu { float: left; width: 100%; } .menu ul{ margin: 0; padding: 0; text-align:center; } .menu ul li { list-style: none; display: inline-block; padding: 5px; } 

 <div class="menu"> <ul> <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> 

Answer 5

 .list-group { text-align: center; } .list-group-item { display: inline-block; } 

 <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> 

Try this css:

.list-group {
   text-align: center;
}
.list-group-item {
   display: inline-block;
}