使用CSS / CSS3自动调整所有元素的高度（使等高） [英] Auto adjust height (make equal height) of all elements using CSS / CSS3

问题描述

我有一个无序的导航项目列表，它们以内联方式显示，每个项目都具有相同的容器宽度（即320像素）。问题我面临的是有一个潜力，文本可能会跑过两行，因为有限的宽度。但是是否可以使所有导航项超链接的高度应该比其他高一些？

背景颜色应用于超链接，因为它需要活动状态

讨论我的小提琴： http://jsfiddle.net/calebo/W7sYZ/1/

解决方案

  .module-controls {display：table; } 
 .module-controls .tab-set {display：table-row; } 
  

没有JS的多浏览器变体： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

I have an unordered list of navigation items that are displayed inline, each of these item share the same equal width of the container (ie. 320px).

The issue I'm facing is there is a potential that the text might runover two lines because of the limited width. But is it possible to make all navigation items hyperlink the same height should one be taller than the others?

The background color is applied to the hyperlink because it needs an active state when content is active.

Heres my fiddle: http://jsfiddle.net/calebo/W7sYZ/1/

解决方案

.module-controls { display: table; }
.module-controls .tab-set { display: table-row; }

Multibrowser variant without JS: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这篇关于使用CSS / CSS3自动调整所有元素的高度（使等高）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！