CSS Fixed 和 Fluid li 在一起

Question

我的分隔符中有三个图像，我想让中间部分流畅，左右部分需要固定。当我在页面上像这样打开它时，它需要看起来像这样； http://s8.postimg.org/r9dg5v6et/dsadsa.jpg

<ul class="separator">
    <li class="sep-orj sep-left"></li>
    <li class="sep-orj sep-middle"></li>
    <li class="sep-orj sep-right"></li>
</ul>

ul.separator {
    width:100%;
}
ul.separator li.sep-orj {
    height:21px;
    display:block;
    float:left;
}
ul.separator li.sep-left {
    width:3%;
    background: url(............./left-arrow.gif) repeat-x;
}
ul.separator li.sep-middle {
    width:94%;
    background: url(............./middle.gif) repeat-x;
}
ul.separator li.sep-right {
    width:3%;
    background: url(............./right-arrow.gif) repeat-x;
}

Answer 1

我知道在您的用例中为此使用列表可能有充分的理由，但为了以防万一，这里有一个使用单个 <hr class="separator"> 的非常简单的解决方案。 HTML 中的元素和这段 CSS，只有一个宽幅图像:

.separator {
    position: relative;
    height: 20px;
    border: none;
    display: block;
    max-width: 1000px; /* ~ width of the image */
    background: url('/img/dsadsa.jpg') left center no-repeat;
}

.separator:after {
    content: "";
    display: block;
    width: 50px;
    height: 20px;
    background: url('/img/dsadsa.jpg') right center no-repeat;
    position: absolute;
    right: 0;
}