I am designing a menu, which width is 980px. I wanted to style them in such a way that all the li's have same padding from left and right. Means after divisions of all the menu have equal paddings. Example attached.
Used html and styles are \[code\]<ul> <li> <a title="" href="javascript:void(0);"> <span class="catName">Furniture</span> </a> </li> <li> <a title="" href="javascript:void(0);"> <span class="catName">Art</span> </a> </li> <li> <a title="" href="javascript:void(0);"> <span class="catName">Test</span> </a> </li> <li> <a title="" href="javascript:void(0);"> <span class="catName">Testing Cate</span> </a> </li> <li> <a title="" href="javascript:void(0);"> <span class="catName">Testing Category</span> </a> </li></ul>\[/code\]Used Style: - \[code\]ul li{ float: left; height: 24px; border-right: 1px solid #2e2f2f; border-left: 1px solid #595a5b;}ul li a { padding: 0 27px; display: block; line-height: 23px;}\[/code\]Any suggestion how to achieve this.