一个元素的背景图象与动态宽度的

Question

我正在编写网页设计的过程中，我花了很多时间考虑如何编码此导航栏，其中<li>具有动态宽度，背景图像调整到元素的宽度。

我的想法是使用<span>并将背景图片分成三部分。

<li>
<span class="libefore"></span>
<a href="#">MOVIES</a>
<span class="liafter"></span>
</li>

最好的编码方式是什么？

Answer 1

通常情况下，这是通过一种名为“推拉门”的技术实现的。读一读：

http://www.alistapart.com/articles/slidingdoors/

Answer 2

如果您愿意使用CSS 2.1：之前和之后：选择器（请参阅此处获取支持的浏览器：http://www.quirksmode.org/css/contents.html），您可以尝试这样的事情：

HTML：

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

CSS：

li:before {
    background-color: #F00;
    content: '\00A0\00A0';
}

li a {
    background-color: #0F0;
    text-transform: uppercase;
}

li:after {
    background-color: #00F;
    content: '\00A0\00A0';
}

这样可以在不引入任何表示元素的情况下保持HTML清洁。 （即没有没有内容或分层目的的span元素）另外，使用文本转换来处理任何大写转换并不是一个坏习惯，以防你想要改变一天的样式而不必修改内容。

这是一个小提琴，应该给出一些起点来调整：http://jsfiddle.net/6Keaa/

希望这能让你朝着正确的方向前进......