1

我的分离器中有三个图像，我想让中间部分变得流畅，左右部分需要修复。当我在页面上像这样打开它时，它需要看起来像这样； 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;
}
4

2 回答 2

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;
}
于 2013-05-13T23:24:28.673 回答
0

这是使用 CSS3 的一种方法。

ul.separator {
    margin: 0;
    padding: 0;
}
ul.separator li.sep-orj {
    height:21px;
    display:block;
    float:left;
}
ul.separator li.sep-left {
    width:15px;
    background: #ccc;
}
ul.separator li.sep-middle {
    width: -webkit-calc(100% - 32px); /* 100% minus the left-column, right-column, and border widths */
    border: 1px solid #ccc;
}
ul.separator li.sep-right {
    width:15px;
    background: #ccc;
}

工作小提琴：http: //jsfiddle.net/tEwx6/

不要忘记，您还需要为宽度使用其他供应商前缀。这是一张图表，让您知道哪些浏览器支持 calc：http ://caniuse.com/calc

于 2013-05-13T23:12:08.720 回答