<!DOCTYPE html >
<html >
<head >
<meta charset="utf-8" />
<title>利用相对定位（position:relative）实现导航li宽度自适应</title>
<style>
ul,li{
margin:0;
padding:0;
list-style:none;
}
#macji{
width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
.macji-skin{
float:left;
position:relative;
left:50%;
}
.macji-skin li{
float:left;
margin:10px;
padding:0 10px;
position:relative;
right:50%;
line-height:60px;
border:solid 1px #000;
}
</style>
</head>
<body>
<h1>跨浏览器实现float:center，No CSS hacks</h1>
<div id="macji">
<ul class="macji-skin">
<li>列表一,我是浮动的</li>
<li>列表二</li>
<li>列表三</li>
<li>这里可能是N</li>
<li>这里可能是N这里可能是N这里可能是N</li>
<li>1</li>
</ul>
</div>
</body>
</html>
<html >
<head >
<meta charset="utf-8" />
<title>利用相对定位（position:relative）实现导航li宽度自适应</title>
<style>
ul,li{
margin:0;
padding:0;
list-style:none;
}
#macji{
width:100%;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
.macji-skin{
float:left;
position:relative;
left:50%;
}
.macji-skin li{
float:left;
margin:10px;
padding:0 10px;
position:relative;
right:50%;
line-height:60px;
border:solid 1px #000;
}
</style>
</head>
<body>
<h1>跨浏览器实现float:center，No CSS hacks</h1>
<div id="macji">
<ul class="macji-skin">
<li>列表一,我是浮动的</li>
<li>列表二</li>
<li>列表三</li>
<li>这里可能是N</li>
<li>这里可能是N这里可能是N这里可能是N</li>
<li>1</li>
</ul>
</div>
</body>
</html>
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
