两种排列方法。

第一种：用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;" > &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 > &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 >