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。