css ul li 100% utilization of space inside fixed div but dynamic li
I have one page in which the width of the div is fixed and it's centralized.
and ul>li are also needed to be centralized by taking their own 100% width even spaces on left and right.
in this situtation, li are dynamic and they can delete开发者_Python百科d/edited/added.
so I don't know how should I proceed further.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" />
<title>Untitled</title>
<style>
.first {text-align:center;width:980px}
.first ul { float:left;width:100%;text-align:center;float:left; }
.first ul li { list-style-type:none;float:left; display:inline-block }
</style>
</head>
<body style="margin:0 auto">
<div id="first">
<ul>
<li>first li</li>
<li>second li</li>
<li>third li</li>
<li>4th li</li>
<li>5th li</li>
</ul>
</div>
</body>
</html>
Thanks in advance
Dave
I am not entirely sure I understoon your question but I think what you might be after is in this example I made for you.
After your comment, I updated, is this example more what you're after?
#first{
width:100%
}
#first ul {
width:100%;
}
#first ul li {
list-style-type:none;
float:left;
}
You are messing up selectors:
id="first" is referenced like #first
My advice is to user a table for such evenly spaced menu: http://jsfiddle.net/inti/GvXzf/
<table style="width: 100%"><tr>
<td>first li</td>
<td>second li</td>
<td>third li</td>
<td>4th li</td>
<td>5th li</td>
</tr></table>
Or you can write a javascript too, that makes the menu items evenly spaced, if you want to stick with ul and lis.
加载中,请稍侯......
精彩评论