我在每个菜单之前都有一个菜单,并且在每个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/