UL里的LI元素左浮动层一行显示时使其居中的方法

前端技术 2023/09/09 CSS
在制作页面是，li浮动是很常用的，一般情况也不用其居中，但有时，其特殊原因需要居中，这是就有点犯难了，这里有了一个很好的解决方法，主要是用了相对定位的原理。
在ul外报一层，使其相对定位，再ul相对定位，距左50%，li相对定位，距右50%就实现了li左浮动后海居中显示。

复制代码
代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"keywords\" content=\"飞科,工作室,飞科工作室,css,web,web标准,网页制作,平面设计,布局,\" />
<meta name=\"description\" content=\"欢迎您来到飞科工作室，本站致力于web标准化，研究css，注重代码书写中的规范；分享前台设计技巧\" />
<title>无标题文档</title>
<style type=\"text/css\">
div, ul, li {
margin: 0;
padding: 0;
border: 0;
}
body {
font: 12px/1.6em 宋体 sans-serif;
color: #585858;
text-align: center;
}
.div1 {
position:relative;
width: 948px;
height: 100px;
margin: 20px auto 0 auto;
background-color: #F9F9F9;
border: solid 1px #D4D4D4;
}
.div1 ul {
position: relative;
left: 50%;
float: left;
}
.div1 li {
position: relative;
right: 50%;
display: inline;
float: left;
margin-left: 10px;
line-height: 38px;
}
</style>
</head>
<body>
<div class=\"div1\">
<ul>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
<li>飞科工作室</li>
</ul>
</div>
</body>
</html>

本文地址：https://www.stayed.cn/item/24830

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案