UL / LI列表项目全宽

Question

我有一个动态创建的列表项。像这样：

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

如何使用它创建全宽ul/li。喜欢：

注意：

• 代码应该可以在IE8中使用

• 我们不知道li项的数量，因为它们是动态创建的

我的CSS代码：

.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;
}

这是一个jsFiddle

Answer 1

在IE8中，你可以在容器上使用text-align-last:justify，在元素上使用display:inline-block来实现均匀间隔效果 - 它只能在稳定的Chrome中使用，所以你需要制作它带有条件注释的后备，因此只有较旧的IE使用text-align方法。出于某种原因，IE还要求您在设置text-align时设置text-align-last - 请记住这一点。

Sample fiddle which works in IE/FF

Answer 2

根据我的评论，尝试jQuery，这是非常轻松的

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

Answer 3

.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/

Answer 4

.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 
 }

Answer 5

您可以使用此代码，这适用于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>

和css代码

 #hbar{
  width:100%
 }

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

 li{
 width:70px;
 }

这是fiddle