Question

我有一个旋转木马滑块，我想为每个图像提供模型名称。所以我使用<div>并将文本放入div。但是文本没有显示，虽然这个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

Answer 1

尝试在此处增加字体大小

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

您的小提琴中有font-size零。请参阅更新后的FIDDLE。

Answer 2

更改

#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;
}

Answer 3

我注意到的是，你已经提到 font-size = 0; ，这会给你造成问题。

font-size是设置要在屏幕上打印的文本大小的属性 。所以增加 font-size = 5px; 至少看看结果。

休息很好。谢谢＆amp;继续编码。：）

html div没有显示其内容文本

3 个答案: