set li width to auto for menu

By | January 22, 2015

Easily  set li width to  auto for  menu

Today i talk about how you set your menu width auto increasing. and it is not so much hard .it will automatically resize the item according to how many <li> items there are.

only follow few step and you easily done this.

Let ‘s Start.

<div class=”menu”>

<ul>

<li>Codefewer 1</li>
<li>Codefewer 2</li>
<li>Codefewer 3</li>
<li>Codefewer 4</li>
<li>Codefewer 5</li>
</ul>
 
 
</div>


CSS code


menu{
    display: table;
    table-layout: fixed;
    width: 100%;
}
menu ul {
    display: table-row;
    margin: 0;
    padding: 0;
}
menu ul li {
    list-style: none;
    display: table-cell;
    text-align: center;
}
menu ul li a {
    display: block;
}
and done.use this code and enjoy

Thanks

Any Query Ask on Comment

Leave a Reply

Your email address will not be published. Required fields are marked *