css – 拉伸水平ul以适合div的宽度

前端之家收集整理的这篇文章主要介绍了css – 拉伸水平ul以适合div的宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于我的网站的主导航,有一个980像素宽的div,主要导航链接为ul。我试图使导航链接拉伸,以适应div的宽度均匀。
<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

我做一些典型的css使ul列表水平(float:left,display:block)。我可以调整李的填充,使它非常接近,但我真正需要的是一种方法,使其伸展自动适应。可能?

编辑
难度1:不能使用表。
难度2:每个nav项目将有不同的宽度,以适应更长和更短的链接名称

解决方法

这是最简单的方法http://jsfiddle.net/thirtydot/jwJBd/

(或表格布局:对于均匀宽度分布固定:http://jsfiddle.net/thirtydot/jwJBd/59/)

这个won’t work在IE7。

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

旧答案在编辑之前:http://jsfiddle.net/thirtydot/DsqWr/

原文链接:https://www.f2er.com/css/222204.html

猜你在找的CSS相关文章