0

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

这是一个小提琴。

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

使用当前设置，隐藏文本的原因是什么？我怎样才能使这项工作？

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

编辑：

我知道我已经在标签上设置了我font-size的。但是，这是必需的，因为内联元素需要相互接触。做到这一点的唯一方法是将和设置为零。0<ul>font-sizeline-height

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

4

3 回答 3

3

我已经用解决方案创建了一个工作小提琴。

总结一下这里发生的事情，您正在设置选择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;

}

我希望这有帮助。

于 2013-09-29T13:01:59.223 回答
0

你已经付出font-size:0了ul。请删除它然后它会工作！

然后你也可以看到文字！;)

于 2013-09-29T12:54:40.063 回答
0

在你的 ul 标签中

ul{

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


}

你已经给了font-size:0px ，所以只需删除它，你的文字将出现在图像的右侧

于 2013-09-29T13:00:58.780 回答