Question

如何让div+ul+li的导航条自动填充100%的宽度?

导航条效果如下图所示:

html代码如下:
<div id="tabs10">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>

css部分代码如下:
body {
margin: 0;
padding: 0;

}
img {
border: none;
}

/*- Menu Tabs 10--------------------------- */

#tabs10 {
float: left;
width: 100%;
font-size: 93%;
line-height: normal;
}
#tabs10 ul {
margin: 0;
padding: 10px 10px 0 50px;
list-style: none;
}
#tabs10 li {
display: inline;
margin: 0;
padding: 0;
font: bold 14px/1.5em Verdana;
width:100%;
}
#tabs10 a {
float: left;
background: url("homepage/images/tableft10.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 4px;
text-decoration: none;
}
#tabs10 a span {
float: left;
display: block;
background: url("homepage/images/tabright10.gif") no-repeat right top;
padding: 5px 15px 4px 6px;
color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs10 a span {
float: none;
}
/* End IE5-Mac hack */
#tabs9 a:hover span {
color: #FFF;
}
#tabs10 a:hover {
background-position: 0% -42px;
}
#tabs10 a:hover span {
background-position: 100% -42px;
}

由于li的数量是动态生成的不确定的,如何保证li的宽度自适应并填充满整个ul(ul的宽度100%,而li元素也占满这些位置不要留空白)? 现在的问题是li元素少的时候就会留下一段空白位置

Answer 1

<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
$(function(){
	var UlWidth=$("ul.nav").width();//得到ul宽度
	var LiLen=$("ul.nav li").length;//得到li的个数
	$("ul.nav li").css({width:UlWidth/LiLen})
});
</script>
<ul class="nav">
    <li><a href="#">第1个LI</a></li>
    <li><a href="#">第2个LI</a></li>
    <li><a href="#">第3个LI</a></li>
    <li><a href="#">第4个LI</a></li>
    <li><a href="#">第5个LI</a></li>
</ul>

 用js来控制

追问

问题是li里面的字符长度也不一样啊,这个可能只能用table来解决吧?

追答

能整除就没问题，不能整除还是不能完全填满的。最好的办法还是table

Answer 2

不可能实现你要的效果。
想做到美观，就要计算具体的宽度数字，内容长度
然后根据这些写样式。

偷懒的设计师是木有的~

追问

我没有想偷懒啊,我现在想改为用表格控制算了,表格的td就能自动分配宽度