如何使url成为HTML unorderedlist中的列表backimage？

本文介绍了如何使url成为HTML unorderedlist中的列表backimage？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 你好，朋友们： 我正在使用list设计导航栏，我为li标签设置了一个背景图片，我在里面写了一个标签li标签为下面的代码。 问题是标签中的文字显示在li的图像上方，我希望它显示在图像下，如何我可以这样做吗？ 我尝试过： < li style = background：（'images / nav -bar / home.png'）无重复中心0px; > < ; a href = index.php > Home < / a > < / li > < li style = background：（'images / nav-bar / products.png'）无重复中心0px > < ; a href = services.php > 服务 < / a > < / li > < li style = background：（'images /nav-bar/downloads.png'）无重复中心0px > < a href = index.php > 下载 < / a > < / li > < li style = background：（'images / nav-bar / about.png'）no-重复中心0px > < a href = index.php > 关于我们 < / a > < / li > < li 样式 = background：（'images / nav-bar / faqs.png'）否-repeat center 0px > < a href = index.php > 常见问题 < / a > < / li > < li style = background：（'images / nav-bar / contact.png'）no-repeat center 0px > < a href = contact.php > 联系我们 < / a > < / li > 这是css： ul＃nav {方向：rtl; float：left; } ul＃nav li { display：inline-block; 身高：85px; } ul＃nav li a：hover { color：orange; text-align：center; } ul＃nav li a { vertical-align：basline; 字体大小：18px; font-weight：bold; display：block; } 解决方案 在下面添加您的风格样式。 ul ＃ nav li { width ： 85px; margin ： 0 auto; position ： 亲属; } ul ＃ nav li a { position ： abso琵琶; 正确 ： 0; left ： 0; width ： 100％; bottom ： 0; text-align ： 中心; } 图片下方会显示文字。 Hello, friends:I am designing navigation bar using list and I have set a certain background image for the li tag and I've wrote a tag inside li tag as the code below.The problem is that the text in a tag showed above the image in li, I want it to be showed under the image, how can I do it?What I have tried:<li style="background: ('images/nav-bar/home.png') no-repeat center 0px;"> <a href="index.php"> Home </a> </li> <li style="background: ('images/nav-bar/products.png') no-repeat center 0px"> <a href="services.php"> Services </a> </li> <li style="background: ('images/nav-bar/downloads.png') no-repeat center 0px"> <a href="index.php"> Downloads </a> </li> <li style="background: ('images/nav-bar/about.png') no-repeat center 0px"> <a href="index.php"> About Us </a> </li> <li style="background: ('images/nav-bar/faqs.png') no-repeat center 0px"> <a href="index.php"> Faqs </a> </li> <li style="background: ('images/nav-bar/contact.png') no-repeat center 0px"> <a href="contact.php"> Contact Us </a> </li>and this is the css:ul#nav{ direction:rtl; float:left;}ul#nav li{ display:inline-block; height:85px;}ul#nav li a:hover{ color:orange; text-align:center;}ul#nav li a{ vertical-align:basline; font-size:18px; font-weight:bold; display:block;} 解决方案 Add below styles your style.ul#nav li { width: 85px; margin: 0 auto; position: relative;}ul#nav li a { position: absolute; right: 0; left: 0; width: 100%; bottom: 0; text-align: center;}It will appear text below image. 这篇关于如何使url成为HTML unorderedlist中的列表backimage？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！