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/

所以问题来了:我怎样才能确保我的水平列表会拉伸并占用所有可用空间,但不会转到下一行。我想我应该删除填充,并使用最大宽度,但我试过了,它并没有真正起作用。我应该结合宽度和最大宽度吗?

提前感谢您的时间和答案。

4

1 回答 1

1

有,您应该将列表设置为display: table并列出项目display: table-cell,但此解决方案不是跨浏览器

示例:http: //jsfiddle.net/rjsaQ/1/

于 2012-04-06T08:21:58.573 回答