CODEWITHSUNDEEP
htmlcss
Hamed mayahian
Hamed mayahian

Reputation: 2323

UL/LI list item full-width

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: enter image description here

Note:

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

Upvotes: 3

Views: 1965

Answers (5)

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

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.

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15891

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

Upvotes: 1

Sebin Simon
Sebin Simon

Reputation: 1646

.record-top-btns{
  display:block;
  width:100%
  height:25px;
  background :#939393;
  }

 .record-top-btns li{
    display:inline-block;
    width:auto // if you want fit li in ul use width in percentage like width 33.3% when using 3 li 
 }

Upvotes: 0

Carol McKay
Carol McKay

Reputation: 2424

.record-top-btns {
   display:block;
   width:100%;
   background:#e3ffca;
}

.record-top-btns li{
    display:inline-block;
    background:#e3ffca;?? you have 2 different background colours coded
}

http://jsfiddle.net/LqXH5/7/

Upvotes: 0

abc123
abc123

Reputation: 262

You can use this code and this works in IE

  <div id="hbar">

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

  </div>

and the css code 

 #hbar{
  width:100%
 }

 #hbar > ul > li{    
 float:left;
 }

 li{
 width:70px;
 }

here is the fiddle

Upvotes: -1

Related Questions