想要對齊包含水平列表的三個div

Question

我正在處理一個html頁面，因爲我被卡住了一些頁腳內容。 我想排列至少三div其中包含一些lists的水平

這樣

CSS

.left-col { 
    float: left; 
    width:25%; 
    height:100px; 
    background-color:blue; 
} 
.center-col { 
    float: left; 
    width: 50%; 
    height:100px; 
    background-color: cornflowerblue; 
    text-align:center; 
} 
.right-col { 
    float: left; 
    width: 25%; 
    height:100px; 
    background-color:green; 
    text-align: right; 
} 

HTML

<div class="left-col"><ul><li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li></ul></div> 
<div class="center-col"><ul><li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li></ul></div> 
<div class="right-col"><ul><li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li> 
    <li>hai</li></ul></div> 

請幫我解決這個

Answer 1

卸下div的預先定義的高​​度。讓他們根據內容進行擴展。在中心div你可以給ul的寬度，然後使用margin-left和margin-right作爲自動中心的文本。

.left-col { 
    float: left; 
    width:25%; 
    background-color:blue; 
} 
.center-col { 
    float: left; 
    width: 50%; 
    background-color: cornflowerblue; 

} 
.center-col ul 
{ 
margin-left: auto; 
margin-right: auto; 
width: 100px; 
} 
.right-col { 
    float: left; 
    width: 25%; 
    background-color:green; 
    text-align: right; 
} 

小提琴：http://jsfiddle.net/ankur1990/H734d/

此外，如果你不想與UL的寬度麻煩自己，那麼你可以去利潤率左到UL

.center-col ul 
{ 
margin-left:100px //According to your need 
} 

Answer 2

DEMO

這裏有2個解決方案：與float: left;和display: inline-block;

Answer 3

HTML

<footer> 
<div class="list33"> 
    <ul> 
     <li>hai</li>    
     <li>hai</li> 
     <li>hai</li> 
    </ul> 
</div> 
<div class="list33"> 
    <ul> 
     <li>hai</li>    
     <li>hai</li> 
     <li>hai</li> 
    </ul> 
</div> 
<div class="list33"> 
    <ul> 
     <li>hai</li>    
     <li>hai</li> 
     <li>hai</li> 
    </ul> 
</div> 

CSS

footer .list33 { 
width: 33.33%; 
float: left;  
} 

小提琴：http://jsfiddle.net/Olavxxx/K8H25/

Answer 4

您可以使用display:table-cell;因此它會隨着高度的增長而水平對齊以及垂直：

演示：http://jsfiddle.net/HarishBoke/54uap/