UL/LI list item full-width

Question

I have a list item that is dynamically created. Like this:

<ul class="record-top-btns">
    <li><a href="#">link1</a></li>
    <li><a href="#">link1</a></li>
    <li><a href="#">link1</a></li>
</ul>

How can create full-width ul/li with that. Like:

Note:

• The code should work in IE8

• we don't know number of li item because they are dynamically created

my CSS code:

.record-top-btns{
    width:100%;
    display:table;
}

.record-top-btns a{    
    padding:2px;
    color:#5c5c5c;
    display:block;
    margin-top:2px;
    margin-bottom:2px;
    text-align:center;
    width:100%;
}

.record-top-btns li{
    display:table-cell; /* will not work in IE8 */
    background:#e3ffca;
    text-align:center;
    background:white;
}

here is a jsFiddle

Answer 1

In IE8 you can use text-align-last:justify on the container and display:inline-block on the elements to achieve the evenly spaced effect - it just won't work in stable Chrome, so you'll need to make it a fallback with conditional comments so only older IEs use the text-align approach. For some reason IE also requires you to set text-align when setting text-align-last - keep that in mind.

Sample fiddle which works in IE/FF.

Answer 2

going as per my comment, try jQuery, its much hassle-free

var li_count = $("ul.record-top-btns li").size();/* get number of li */
var wid = 100 / li_count; /*find li width */

$("li").css('width',wid+'%'); /* set li width */

demo