Question

我正在设计一个菜单，以便与响应式设计网站一起工作，我希望将.gif图像浮动到li元素的右侧。问题是在我尝试修改我的CSS后，我的.gif图像没有出现。

HTML：

 <ul id="nav">
    <li class="first_item_drop"><a class="additional_item">Our Work</a></li>
    <li><a class="additional_item">About Us</a></li>
 </ul>

CSS：

.first_item_drop {border-top:1px solid #A9AFBC; background:url(../images/small_down_arrow.gif) no-repeat 10px right center;}
.additional_item {border-bottom:1px solid #A9AFBC;}

我尝试了不同的方法，但我无法显示.gif图像。

非常感谢任何帮助！

Answer 1

CSS Backgrounds - 3.10. Backgrounds Shorthand: the ‘background’ property

<bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

您的语法无效。

您需要在<{em> background-position（right center）之前指定background-size（10px）。两者都应该用正斜杠/分隔。

因此，它应该是：

background: url(../images/small_down_arrow.gif) right center / 10px no-repeat;

Working Example

Answer 2

试试这个：

.first_item_drop {border-top:1px solid #A9AFBC; background:url("../images/small_down_arrow.gif") center right / 10px no-repeat;}
.additional_item {border-bottom:1px solid #A9AFBC;}

JSFIDDLE

li元素内的图像不会出现

2 个答案: