CSS 下拉菜单

Question

我想用与屏幕一样长的漂亮按钮制作一个下拉列表（与更多屏幕兼容）......

我将使用 3 张图像（左、中和右）......像这样（当然，更小）：

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

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

Answer 1

试试这个 - 这使用了 3 个与 IE8 及以下不兼容的背景图像，但您可以使用两个内部 div 为您提供三个容器并在每个容器中放置一个图像 - 请注意底部图像最后列出。

nav {
     height:75px; /* height of graphic elements */
      background:
        url(images/left_end.png) no-repeat 0px 0px,
        url(images/right_end.png) no-repeat right top,
        url(images/center.png); /* this images repeats */
}

Answer 2

我的解决方案：

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 演示

Answer 3

这很容易。

那是 html：

<button>
  <span><span> MENU </span></span>
</button>

您应该将图像的所有部分放在一个非常宽的不透明（因为透明 png 方法更难一点）PNG（就像它在设计上看起来一样），修剪到图像内容。 （一张图片不会增加太多尺寸，但会减少对服务器的 http 请求）。 它叫做精灵。

button {  }
button span { 
  padding:0 0 0 25px; 
  background:url('image.png') left 0; 
  display:inline-block; 
  height:25px; 
  line-height:25px; 
}
button span span { 
  padding:0 25px 0 0; 
  background:url('image.png') right 0; 
}

而已。 当然，您应该放置您的图像名称，以及填充、高度和行高的值。

Answer 4

没有包含 3 张图片的示例，因为您不需要 3 张图片。 创建一个小的右侧图像（就像您在上面发布的那样）并创建一个具有最大宽度（比如说 800 像素）的左 + 中心图像。 在<li>上设置左侧/背景图像，并将右侧挂在<a>上。

<li>
   <a href="#">Link</a>
</li>