html - CSS 下拉菜单

Question

我想制作一个下拉列表，其中包含与屏幕一样长的漂亮按钮(与更多屏幕兼容)......

我将使用 3 张图像(左、中和右)...像这样(当然，较小):

中间部分将重复自身以“填充”按钮。我想得到这样的东西:

没有 3 张图片的示例，我只能找到 2 张图片。

Answer 1

我的解决方案:

html:

<div class="button">
    <div class="left"></div>
    <div class="inner">text</div>
    <div class="clear"></div>
</div>

CSS:

* {margin: 0px; padding: 0px;}
.clear {clear: both; height: 0px; font-size: 0px; line-height: 0px;}

.button {
    padding-right: 15px; /* right image width */
    background: url('right_image.jpg') no-repeat right top;
    height: 20px; /* images height */
}

.button .left {
    background: url('left_image.jpg') no-repeat right top;
    width: 15px; /* left image width */
    height: 20px; /* images height */
    float: left;
}
.button .inner {
    height: 20px; /* images height */
    background: url('middle_image.jpg') repeat-x right top;
    text-align: center;
}

jsFiddle Demo