拉伸水平 ul 以适应 div 的宽度 [英] Stretch horizontal ul to fit width of div

问题描述

对于我网站的主导航，有一个 980 像素宽的 div，主导航链接有一个 ul.我正在尝试使导航链接拉伸以均匀地适应 div 的宽度.

<ul id="horizo​​ntal-style"><li><a href="#">导航项目</a></li><li><a href="#">短项目</a></li><li><a href="#">非常长的导航项</a></li><li><a href="#">导航链接</a></li><li><a href="#">另一个链接</a></li>

我正在做一些典型的css来水平制作ul列表(浮动:左，显示:块).我可以调整 li 的填充以使其非常接近，但我真正需要的是一种使其自动拉伸以适应的方法.可能吗?

编辑难点1:不能使用表.难点 2:每个导航项都有不同的宽度，以适应更长和更短的链接名称.

解决方案

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

(或使用 table-layout: fixed 均匀宽度分布:http://jsfiddle.net/thirtydot/jwJBd/59/)

此在 IE7 中不起作用.

#horizo​​ntal-style {显示:表；宽度:100%；/*表格布局:固定；*/}#水平式李{显示:表格单元格；}#horizo​​ntal-style a {显示:块；边框:1px纯红色；文本对齐:居中；边距:0 5px；背景:#999；}

_{编辑前的旧答案:http://jsfiddle.net/thirtydot/DsqWr/}

For the main nav of my site, there is a 980px wide div with a ul for the main nav links. I am trying to make the nav links stretch to fit the width of the div evenly.

<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>

I am doing some typical css to make the ul list horizontally (float: left, display: block). I can tweak the padding of the li to get it very close, but what I really need is a way to make it stretch to fit automatically. Possible?

Edit Difficulty 1: Can't use tables. Difficulty 2: Each nav item will be a different width to accommodate longer and shorter link names.

解决方案

This is the easiest way to do it: http://jsfiddle.net/thirtydot/jwJBd/

(or with table-layout: fixed for even width distribution: http://jsfiddle.net/thirtydot/jwJBd/59/)

This won't work in 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;
}

_{Old answer before your edit: http://jsfiddle.net/thirtydot/DsqWr/}

这篇关于拉伸水平 ul 以适应 div 的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！