2014-10-16 737 views
0

我有一个旋转木马滑块,我想给每个图像的型号名称。所以我使用<div>并将文本放入div。但文本不显示,虽然这个div的背景颜色是可见的。所以需要帮助。请。如何显示文本? 我的代码示例放在这里html div不显示其内容文字

HTML

<link href="bootstrap.min.css" rel="stylesheet"> 
<div id="body-content"> 
    <div class="carousel-nano" > 
      <div id="demo5" class="scroll-img"> 
       <ul> 
       <li> 
        <a href="" target="_blank"> 
         <img src="jsfiddle.net/img/logo.png"/> 
         <div style="color:red;background-color:#000;">Text goes here</div> 
        </a> 
       </li> 
       </ul> 
      </div> 
    </div> 
</div> 

CSS

#body-content .scroll-img { 
    border: 2px solid #CCC; 
width: 890px; 
height: 155px; 
overflow: hidden; 
font-size: 0; 
margin-top: 2px; 
} 
#body-content .scroll-img ul { 
    margin: 0; 
    height: 58px !important; 
    background:#123456; 
} 
#body-content .scroll-img ul li a img{ 
    width: 140px; 
    height: 100px; 
    margin: 0; 
} 
#body-content .scroll-img ul li { 
    display: inline-block; 
    margin: 0px 0 0px 0px; 
    border-right: 10px solid #EEE; 
} 

#body-content #demo5.scroll-img ul { 
    width: 1500px; 
} 
#body-content #demo5-btn { 
    width: 680px; 
    padding-top: 10px; 
} 
#body-content .carousel-nano{ 
margin:0 auto; 
padding:0px; 
text-align:center; 
width:960px; 
} 
#search-image{ 
margin: 0px auto; 
padding: 0px; 
float: left; 
width: 66px; 
height: 103px; 
} 

jsfiddle

+0

'font-size:0;' – jurgemaister 2014-10-16 10:30:45

+0

@jurgemaister非常感谢你 – Rasel 2014-10-16 10:33:46

回答

3

尝试增加字体大小这里

#body-content .scroll-img { 
    font-size : 12px; 
} 

您的font-size为零。请参阅更新FIDDLE

+1

非常感谢Gautam3164 – Rasel 2014-10-16 10:34:37

1

变化

#body-content .scroll-img { 
    border: 2px solid #CCC; 
    width: 890px; 
    height: 155px; 
    overflow: hidden; 
    font-size: 0; 
    margin-top: 2px; 
} 

#body-content .scroll-img { 
    border: 2px solid #CCC; 
    width: 890px; 
    height: 155px; 
    overflow: hidden; 
    font-size: 14px; 
    margin-top: 2px; 
} 
+0

谢谢你Vijish Vijayan – Rasel 2014-10-16 10:47:37

1

的事情,我已经注意到了,你刚才提到字体大小= 0;这对您造成了问题。

字体大小设置要在屏幕上打印结果文字的大小属性。 so increase font-size = 5px;至少看到结果。

休息很好。 谢谢&继续编码。 :)