我有一个水平渲染的图像列表 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
中了.
最佳答案
我创建了一个 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;
}
希望对您有所帮助。
关于html - 元素文本内容在水平排列的混合内联元素中不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19077874/