Question

我有一个问题（显而易见..）

我有这个HTML：

<div id="row-01-separator">
    <ul>
        <li>d</li>
        <!-- -->
        <li><img src="img/scroll_one.png"></li>
        <!-- -->
        <li>d</li>
    </ul>
</div>

中间li与图像无法获得背景颜色。只是第一个和最后一个元素应该有背景颜色。

我有这个CSS代码

#row-01-separator ul {
    height: 32px;
}

#row-01-separator ul li {
    display: inline-block;
    vertical-align: top;
    height: 100%; 
    min-height:100%;
}

#row-01-separator ul li:first-child, #row-01-separator ul li:last-child {
    background-color: white;
    width: calc(50% - 38px);
    height: 100%;
    min-height:100%;
}

它有效。但问题是width: calc(50% - 38px);这在ie8中不起作用。

你有什么想法我怎么能这样做？我知道有一个javascript和oneresize的解决方案。

但也许你有纯css/html的解决方案而没有js而没有calc()。

我在CodePen上设置了一些东西。我认为你可以比http://codepen.io/anon/pen/yBxdq

更好地理解它

修改

我决定做javascript / jquery替代方案。我在codepen上设置了一些东西，也许有人可以在以后使用它：http://codepen.io/anon/pen/tfqdL

UL - 3 li - 中李总是居中

0 个答案: