css使用table布局

用css来布局

<div class="table">
  <div class="table-row">
    <div class="table-cellone">标题</div>
    <div class="table-cell">选项1</div>

  </div>
  <div class="table-row">
    <div class="table-cell"></div>
    <div class="table-cell">选项2</div>
  </div>
</div>

.table{
  display: table;
  
  border-collapse:collapse;
}
.table-row{
  display: table-row;
}
.table-cell, .table-head{
  display: table-cell;
  padding:1em;
  border:#f0f0f0 1px solid;
}
.table-cellone{
  display: table-cell;
  width: 100px;
  padding-right: 10px;
  background: red;
  text-align: right;
}

jsfiddle source code

上面的例子是严格遵守表格的形式来编写的html框架，下面的例子用css来布局html

<ul class="navbar">
    <li><a href="#">Link</a></li>
    <li><a href="#">Medium</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Larger Link</a></li>
</ul>

.navbar {
    width:500px;
    display:table;
    li{
        display:table-cell;
        text-align:center;
    }
}

jsfiddle source code 2