码迷,mamicode.com
首页 > 其他好文 > 详细

两种排列方法。

时间:2015-06-29 11:38:57      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:

第一种:用float:left 

  • 123
  • 123
  • 123
  • 123
  • 123
  • 123
  • 123
  • 123
  • 123




 


第二种,用margin-left为负值来处理

  • qwe
  • qwe
  • qwe
  • rty
  • rty
  • rty
  • yui
  • yui
  • yui

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
     <style>
         div
{float:left;}
     
</style>
     <style>

#lie
{line-height: 3em;}

.e
{margin-left: 80px;

}

.f
{margin-left: 160px;}

li.top 
{ margin-top:-9em;}

</style>
</head>
<body>

<p>第一种:用float:left<span style="line-height: 1.5;">&nbsp;</span></p>
<div>

<ul>

     <li class="a">123</li>

     <li class="a">123</li>

     <li class="a">123</li>

</ul>

</div>

<div>

<ul>

     <li class="b">123</li>

     <li class="b">123</li>

     <li class="b">123</li>

</ul>

</div>

<div>

<ul>

     <li class="c">123</li>

     <li class="c">123</li>

     <li class="c">123</li>

</ul>

</div>

<br />

<br />

<br />

<p><br />

</p>

<p>&nbsp;</p>

<hr />

<p>第二种,用margin-left为负值来处理</p>

<ul id="lie">

     <li class="d">qwe</li>

     <li class="d">qwe</li>

     <li class="d">qwe</li>

     <li class="e top">rty</li>

     <li class="e">rty</li>

     <li class="e">rty</li>

     <li class="f top">yui</li>

     <li class="f">yui</li>

     <li class="f">yui</li>
</ul>

&nbsp;<hr />

</body>
</html>

两种排列方法。

标签:

原文地址:http://www.cnblogs.com/liurenxingyu/p/4607021.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!