想要水平对齐包含列表的三个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

以下是两个解决方案：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/