标签：html   css   table   table-cell   

</pre><p>做成這種效果<img src="" alt="" /></p><p><img src="data:image/png;base64,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" alt="" /></p><p><a target=_blank target="_blank" href="http://jsbin.com/mufifisucu/2/edit?html,css,js,output">demo演示地址</a> </p><p>http://jsbin.com/mufifisucu/2/edit?html,css,js,output</p><p>用到了display:table</p><p></p><pre name="code" class="css">.head{
  display:table;
  width:100%;
  background:#ccc;
}
.box {
position: relative;
display: table-cell;
 height:50px;
 border-left: 1px solid #232228;
 background:green;
}

這樣可以達到的效果是：多個菜單水平排列並且平分父元素的寬度。

CSS display:table属性用法解析

使用display:table 做多菜單切換

标签：html   css   table   table-cell   

原文地址：http://blog.csdn.net/dongzhout/article/details/41443289