利用相对定位（position:relative）实现导航li宽度自适应

最新推荐文章于 2022-01-13 08:53:04 发布

原创最新推荐文章于 2022-01-13 08:53:04 发布 · 715 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#居中宽度自适应导航

web前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用CSS中的相对定位属性position:relative来实现导航栏li元素的宽度自适应，确保网页布局的灵活性和响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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