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

Question

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

这是一个 fiddle .

最后<li> element 是我用来附加文本的元素。尽管恢复了font-size , white-space和 line-height对于他们的正常设置，下面的段落文本不会自行显示。

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

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

编辑:

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

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

Answer 1

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

总结一下这里发生的事情，您在 ul 选择器上设置了 font-size: 0;，然后尝试重置 font-size 返回 li 选择器。

我通过将 font-size: 0; 向下移动到 ul li 选择器，然后放置 font-size: 1em; 解决了这个问题。 code> 在 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;

}

希望对您有所帮助。