UL里的LI元素左浮动层一行显示时使其居中的方法_ Div+Css教程-查字典教程网
UL里的LI元素左浮动层一行显示时使其居中的方法
UL里的LI元素左浮动层一行显示时使其居中的方法
发布时间:2016-12-27 来源:查字典编辑
摘要:在制作页面是,li浮动是很常用的,一般情况也不用其居中,但有时,其特殊原因需要居中,这是就有点犯难了,这里有了一个很好的解决方法,主要是用了...

在制作页面是,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>

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类