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

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -