Question

我在每个菜单前都有一个菜单，我在每张菜前都有一张图片来说明菜单。

我的代码：http://jsfiddle.net/dtjmsy/7UHxa/2/

<div>
  <ul>
    <li><a href="">
        <img width="40" height="14" src="http://img11.hostingpics.net/pics/902607libkgd.png" alt="li_bkgd">Example menu 1</a></li>
  </ul>
</div>

我的问题是如何将文字放在图像的顶部？

感谢您的帮助

Answer 1

使用image作为列表元素的背景图片。

根据您的意见，我得到了您的要求。所以这是解决方案及其解释。

1-您需要在文本下方显示图像。所以li元素的底部应该有一些空格。为此，我们必须使用填充底部。

2-您还需要使用背景图像，以便根据需要默认设置图像但背景图像的位置。所以你也需要玩它。

这是你的css

#menu li
{
    background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
    background-position:0px 10px;  // 0px from the left and 10px from the top
    padding:0px 0px 10px 10px;     // 10px padding from the left and bottom to shift the text according to image position
}

Js Fiddle Demo

Answer 2

只需改变你的风格，如下所示

#menu {
    list-style-type:none;
}
#menu li {
    background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
    background-position:bottom left;
    height:30px;
    padding-left:15px;
}

希望这应该有效..

Answer 3

您的HTML：

<div id="menu">
  <ul>
    <li><a href="#">Example menu 1</a></li>
  </ul>
</div>

CSS示例：

#menu li
{
    background :url('example.png') no-repeat;
    background-position: left 1px top -1px;
}

此外，您可以为每个项目使用不同的背景：

#menu li:first-child
{
    background :url('example.png') no-repeat;
    background-position: left 1px top -1px;
}

此外，:last-child和nth-child(2)会选择每个<li>元素作为其父级的第二个子元素

列表项目菜单中的图像文本

3 个答案: