title: UL/LI list item full-width
body: <p>I have a list item that is dynamically created. Like this:</p>
  
  <pre><code>&lt;ul class="record-top-btns"&gt;
      &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How can create full-width <code>ul/li</code> with that. Like:
  <img src="https://i.stack.imgur.com/UOMP5.png" alt="enter image description here"></p>
  
  <p><strong>Note:</strong> </p>
  
  <ul>
  <li><p>The code should work in IE8</p></li>
  <li><p>we don't know number of <code>li</code> item because they are dynamically created</p></li>
  </ul>
  
  <p>my CSS code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>here is a <a href="http://jsfiddle.net/LqXH5/" rel="nofollow noreferrer">jsFiddle</a></p>