html - UL/LI 列表项全 Angular

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>

如何创建全 Angular 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-last 时设置 text-align - 请记住这一点。

Sample fiddle which works in IE/FF .