0
我不知道是否有一个解决方案,以这样的:(!可能没有,但你永远不知道)流体自适应无序水平列表
假设我们有一个UL列表像这样的:
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/">What we do</a></li>
<li><a href="/">Human resources</a></li>
<li><a href="/">How we work</a></li>
<li><a href="/">Management</a></li>
<li><a href="/">Multimedia</a></li>
</ul>
和我们的CSS使它与inline-block的技巧水平显示:
.nav li {display:inline-block;}
,我们添加一些基本的视觉效果
.nav li {border-right: 3px solid #ffb521;}
.nav a:link, .nav a:visited {color: #a51d21;font: bold 18px/18px Calibri,Tahoma,sans-serif;padding: 10px 30px 10px 30px;display: block;background: #ffd074;}
.nav a:hover, .nav a:active {background:#a54d24;color:#ffd074;}
没什么特别的。
这里也是小提琴:http://jsfiddle.net/rjsaQ/
所以问题来了:我怎样才能确保我的水平列表,将延伸并采取一切可用的空间,但不会去到下一行。我想我应该删除填充,并玩最大宽度,但我试过了,它并没有真正的工作。我应该结合宽度和最大宽度吗?
在此先感谢您的时间和答案。
谢谢你,确实我觉得IE7及以下将无法播放与显示不错:表.. – 2012-04-07 20:34:01