Question

我有一个水平渲染的图像列表display:inline和其他各种CSS，以使其工作。在图像行的末尾，我想要包含一部分文字。图像的水平排列工作正常，但是当我在最后添加这个“文本部分”时，我似乎无法将其显示出来。

这是fiddle。

最后一个<li>元素是我用来追加文本的元素。尽管将font-size，white-space和line-height恢复为正常设置，但下面的段落文字不会显示出来。

使用当前设置，隐藏文本的是什么？我怎样才能做到这一点？

水平图像在我测试的大多数浏览器中都能完美显示，因此我不想更改任何其他列表项样式属性;只是<li class="page">和任何孩子。

修改：

我知道我已在font-size标记上将0设置为<ul>。然而，这是必要的，因为内联元素需要彼此接触。唯一的方法是将font-size和line-height设置为零。

我现在可以看到这是一个font-size问题，但我需要对<li class="page">元素进行任何CSS更改/添加。更不用说在em's中保持我的字体大小。

Answer 1

我创建了一个working fiddle with the solution。

总结这里发生了什么，您在font-size: 0;选择器上设置ul，然后尝试重置font-size选择器上的li。

我通过将font-size: 0;向下移动到ul li选择器，然后将font-size: 1em;放在ul > li.page选择器上解决了问题。

您的错误是尝试重置ul的孩子的字体，而ul（父母）仍然指示font-size将是0。

以下是CSS的相关部分：

ul{

  width:100%;
  height:100%;
  overflow-y:scroll;
  white-space: nowrap;
  line-height: 0;

}

ul li{

  display:inline;
  font-size: 0;
  height:100%;

}

ul li img{

  max-height:100%;
  height:100%;
  width:auto !important;

}

ul > li.page{

  font-size:1em;

}

ul > li > div{

 display:inline-block;
 width:40%;
 white-space:normal;
 line-height:1;
 vertical-align:top;

}

我希望这会有所帮助。

Answer 2

您已为font-size:0提供了ul。请删除它然后它会工作!!

然后你也可以看到文字!! ;）

Answer 3

在您的ul标签

中

ul{

  width:100%;
  height:100%;
  overflow-y:scroll;
  white-space: nowrap;
  line-height: 0;
  font-size: 0;


}

你已经font-size:0px 所以只需将其删除，您的文字就会出现在图片的右侧

元素文本内容在水平排列的混合内联元素中不可见

3 个答案: