javascript - 使用CSS自动拉伸(stretch)元素以适应父容器

Question

我正在尝试在固定高度的框内制作一个垂直导航栏。我怎样才能使按钮动态地平均改变高度以适应框内？这是一个 jsfiddle 来证明我的意思。

http://jsfiddle.net/0w3f2fm1/

所以现在如果我要添加第六个或第七个按钮，它们将被均匀拉伸(stretch)以适应 nav 容器。是否可以仅使用 css 来实现，还是应该使用 javascript/jquery 进行干预？

注意:它们将使用后端 php/mysql 应用程序添加，而不是通过代码添加。

另请注意，我目前的高度是使用填充完成的，因为我希望文本在按钮内居中。

谢谢

Answer 1

你问题中的问题是你给了父元素固定大小的高度，你希望子元素被拉伸(stretch)以填充父元素。

• 所以你必须以百分比的形式给出 li 的高度。
• 关于文本的垂直居中，您可以使用 display:table-cell、vertical-align:middle 属性，但是使用表格进行布局并不是最佳做法。
• 所以我使用位置来居中对齐文本。

这是jsbin:

http://jsbin.com/jirozicifedo/2/

这是动态解决方案(Javascript):

http://jsbin.com/batuyoxupofu/1/edit