css 布局 怎么移动ul ?

html-css016

css 布局 怎么移动ul ?,第1张

用Css设置图片的位置的话:

1.通过position的绝对定位,然后在通过left和top就可以设置你的ul移动位置了;代码如下

<div style='position:absolutleft:0pxtop:0px'>

<ul>

<li>我是测试文字</li>

</ul>

</div>

2.通过margin这个属性操作,margin:10px 20px 30px 40px这个的意思就是距离上边10px,距离右边20培训,距离下边30px,距离左边40px,代码如下

<div>

<div style=' width:330pxheight:200pxmargin-top:30px'>

<p>我是测试文字</p>

</div>

</div>

看一个简单的图,一个div中写了ul和li,设置li浮动后显示这种情况,div或者ul不自动伸缩

再看一个例子(复制即可)

<!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/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

*{

padding:0px

margin:0px

}

body,ul,ol,li,dl,dt,dd,EM,p,h1,h2,h3,h4,h5,h6,fieldset,table,td,img,div,input

{margin:0padding:0border:0}

ul,li{list-style:none}

body {

background:#FFFFFF none repeat scroll 0 0

font-family:Verdana,Arial,Helvetica,sans-serif

font-size:12px

letter-spacing:0px

color:#555

}

#center{margin:5px 0}

a:link{color:#333text-decoration:none}

a:visited{color:#333text-decoration:none}

a:hover{color:#900}

a:active{color:#333}

.wrap960{width:960pxmargin:0 auto}

.wrap{width:960pxmargin:0 auto}

.lm3{width:100%line-height:20pxheight:20pxfont-size:14px

font-weight:boldcolor:#333padding:0 0 8px 0border-bottom:1px solid

#e7e7e7margin:0 0 8px 0}

.box_style_two{border:1px solid #e7e7e7padding:10px 10px 15px

10pxfloat:left}

/**star content**/

.starleft{width:262pxheight:autopadding:0 0 0 10pxfloat:left}

.zimu li{width:18pxheight:18pxfont-size:10pxline-height:18px

float:leftclear:nonemargin:0 3px 3px 0text-align:center

padding:0display:inline}

.zimu a{display:blockwidth:16pxheight:16pxborder:1px #ccc solid

background:#FFF}

.zimu a:hover,.zimu a:active{border:1px #CF2504 solid

background:#CF2504color:#FFFFFF}

</style>

</head>

<body>

<div class="wrap">

<div class="con_wrap2">

<div class="starleft">

<div class="box260">

<div class="box_style_two">

<div class="lm3">推荐推荐推荐推荐推荐推</div>

<ul class="zimu">

<li>A</li>

<li>B</li>

<li>C</li>

<li>D</li>

<li>E</li>

<li>F</li>

<li>G</li>

<li>H</li>

<li>I</li>

<li>G</li>

<li>K</li>

<li>L</li>

<li>M</li>

<li>N</li>

<li>O</li>

<li>P</li>

<li>Q</li>

<li>R</li>

<li>S</li>

<li>T</li>

<li>U</li>

<li>V</li>

<li>W</li>

<li>X</li>

<li>Y</li>

<li>Z</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

问题探讨

.box_style_two{border:1px solid #e7e7e7padding:10px 10px 15px 10px}

这条规则里添加float:left即可

或者

.box_style_two{border:1px solid #e7e7e7padding:10px 10px 15px

10pxoverflow:hidden_zoom:1}

其实你把ul和li都加上背景色就能看出端倪来的:

如果li的margin-top是正值(为了看得明白些,我用的是10px),是这样的:

红色部分是ul,蓝色则是li,最上面的黄色部分则是第一个li的margin-top(也就是10px),它是凸出在ul的外面的,这也就是说,如果margin-top是正值,则第一个li的位置会保持不变,从第二个li开始才是逐渐向下拉伸的(值得一提的是:如果li的margin-top大于ul的margin-top,则ul会以li的margin-top作为基准向下推,这时候第一个li就不会保持位置不变了)。

而当li的margin-top是负值时(比方说-10px),情况就不是这样了,第一个li会向上移动10px,而第二个li则移动20px,依此类推,连带着整个ul也会向上移动10px。