所以,这是瘦...
我有a page that has a list as display:table-cell
.随着浏览器宽度的调整,列表的内容( anchor )可能会换行到 2 行。问题是不换行到 2 行的 anchor 不会保持 100% 的高度。
CSS...
.home .pushes ul {display:table;}
.home .pushes ul li {display:table-cell; vertical-align:middle; width:25%; background-color:#e5a015; color:#ffffff;}
.home .pushes ul li a {display:block; padding:4em 0; padding:4rem 0;}
因此,<li>
的高度应由 <a>
的高度和填充确定.但是,因为它是 <display:table-cell>
, 高度由最高的 <a>
决定.
好的,所以只需设置 a {height:100%;}
.但是,然后, anchor 不保留填充。所以,只需设置 li {height:160px;}
或者其他的东西。但是, anchor 不是垂直居中的。所以,只需设置 li {line-height:160px;}
.但是,当它换行到 2 行时, anchor 是巨大的。
那么,男人应该做什么?
我可以做到 li {display:inline-block;}
.但我希望所有的盒子都具有相同的高度。
张杰
编辑...
为后代包含 HTML...
<ul>
<li>bleh</li>
<li>bleh</li>
</ul>
张杰
编辑 2...
anchor 背景颜色没有增长到其父级的整个高度。
我没有意识到我可以上传图片。感谢您的提示。
张杰
最佳答案
解决此问题的最佳方法是使用 position: relative 和 position: absolute。
例子:
li {
position: relative;
}
li a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
但是,上面的方法不起作用,因为你的 li 使用的是“display: table-cell;”和 position: relative 没有为表格单元格定义(参见:Using Position Relative/Absolute within a TD?)。
因此,您唯一的选择就是使用 Javascript 来完成这项工作。有很多解决方案,但这里有一个:
使用 jQuery 调整大小方法 ( http://api.jquery.com/resize/ ) 跟踪窗口何时调整大小。当窗口调整大小时,修改 anchor 标记的填充,使其继续覆盖整个空间。
关于CSS:列表项中的 anchor 不会保持 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12765877/