淺談ul布局以及table布局

我個人對於某些言論說要注重html語義化在布局中的應用，我反而不怎么感冒，試試兼容IE7&&項目期相對較趕的情況下，我還是推薦快速開發為主，兼容性強為主。

• 如果布局中需要用戶邊框，推薦div或者table布局；如果不需要邊框，ul其實也是不錯的一種布局方式。

• ul布局可以很好地適應布局內容自頂向上對齊地方式，如圖。table永遠都是垂直居中的方式，除非設置相應的vertical-align為top或者text-top

　　　　           

• 代碼

• ul布局css

  ul{
      list-style-type: none;
      padding-left: 0px;
      margin: 0px;
  }
  li{
      float: left;
      word-wrap: break-word;
      word-break: break-all;
      width: 130px;  /*看個人需求*/

  } .clearfix { overflow: auto; zoom: 1; _zoom:1 }

• ul布局html

  <ul class="clearfix">
      <li>標題</li>
      <li>正文費德勒咖啡的旅客謹防丟失了看見對方示范點；了范德薩犯得上看見空間發電機發電撒賴科技范德薩</li>
  </ul>
  <ul class="clearfix">
      <li>標題</li>
      <li>正文費德勒咖啡的旅客謹防丟失了看見對方示范點；了范德薩犯得上看見空間發電機發電撒賴科技范德薩</li>
  </ul>
  <ul class="clearfix">
      <li>標題</li>
      <li>正文費德勒咖啡的旅客謹防丟失了看見對方示范點；了范德薩犯得上看見空間發電機發電撒賴科技范德薩</li>
  </ul>

• table布局css

  table{
      border-collapse: collapse;
  }
  td{
      width: 130px;
  }

• table布局html

  <table cellpadding="0">
      <tr>
          <td>標題</td>
          <td>正文費德勒咖啡的旅客謹防丟失了看見對方示范點；了范德薩犯得上看見空間發電機發電撒賴科技范德薩</td>
      </tr>
  </table>