我在每个菜单之前都有一个菜单,并且在每个li之前都有一个图像来说明菜单。

我的代码: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>


我的问题是如何将文本放置在图像上方?

谢谢你的帮助

最佳答案

使用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

关于css - 列表项菜单中的图像上方的文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24252703/

10-12 00:14
查看更多