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

Answer 2

这很容易。

那是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 3

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

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

Answer 4

试试这个 - 这使用了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 */
}