手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >UL里的LI元素左浮动层一行显示时使其居中的方法
UL里的LI元素左浮动层一行显示时使其居中的方法
摘要:在制作页面是,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>

【UL里的LI元素左浮动层一行显示时使其居中的方法】相关文章:

CSS实现同一行的图片和文字垂直居中对齐的方法

让多个div在同一行显示的样式及html代码

css实现body背景图片水平垂直居中方法

实现div垂直居中的display:table-cell方法示例介绍

CSS实现圆柱型数据报表的方法

控制DIV中文字绝对居中的简单方法

CSS实现左图右文混排布局的方法

chrome居中但ie不居中的解决方法

DIV+CSS 全屏垂直居中的一个办法

CSS让ul所有的li居中显示的方法

精品推荐
分类导航