CODEWITHSUNDEEP
htmlcsslist
Sinla
Sinla

Reputation: 37

How do I make my list horizontal

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.

Upvotes: 1

Views: 187

Answers (5)

Hrishabh Singh
Hrishabh Singh

Reputation: 102

.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;
}

Upvotes: 0

Alex
Alex

Reputation: 113

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>

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8409

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>

Upvotes: 0

Kuldeep Mishra
Kuldeep Mishra

Reputation: 4040

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>

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 4

Related Questions