第一种：用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 style="text/css">
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;"> </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> </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>
<hr />
</body>
</html>
<html>
<head>
<title>列</title>
<meta charset="utf-8"/>
<style style="text/css">
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;"> </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> </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>
<hr />
</body>
</html>
posted on
