如何使url成为HTML unorderedlist中的列表backimage？ [英] How to make url be under list backimage in HTML unorderedlist?

问题描述

你好，朋友们：



我正在使用list设计导航栏，我为li标签设置了一个背景图片，我在里面写了一个标签li标签为下面的代码。



问题是标签中的文字显示在li的图像上方，我希望它显示在图像下，如何我可以这样做吗？



我尝试过：



< pre lang =PHP> < li style = background：（'images / nav -bar / home.png'）无重复中心0px; >
< ; a href < span class =code-keyword > = index.php >
Home
< / a >
< / li >

< li style = background：（'images / nav-bar / products.png'）无重复中心0px >
< ; <跨度class =code-leadattribute> a href = services.php >
服务
< / a >
< / li >

< li style = background：（'images /nav-bar/downloads.png'）无重复中心0px >
< a href = < span class =code-keyword> 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！