Html 使用css将行划分为4列

我正在做一个项目，我正在分享的代码是页面页脚部分的代码

<div id="footerPage"> 
<div id="footerPageId">
    <div  id="footerLeft">
    <ul>
                 <li><a href="#">Site Map</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>                   
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
    </ul> 
    </div>
    <div  id="footerCenter">
    <ul>
                 <li><a href="#">Site Map</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>                   
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Site Map</a></li>
                <li><a href="#">Home</a></li>

    </ul> 
    </div>
    <div id="partnerWithUs">
        <ul>
            <li><a href="#">Partner With Us</a></li>
        </ul>
    </div>
     <div id="followUs">
         <ul>
             <li><a href="#">Facebook</a></li>
             <li><a href="#">Linkedin</a></li>
         </ul>
    </div>           

</div>

以下输出中有两个问题

1） 页脚下方有一些空白 2） 页脚分为四列，div文本未对齐。例如，第一列“站点地图文本”在div顶部（蓝色开始的地方）和该列的第一行之间有一些空间。第二列完全没有空间，第三列（与我们合作）div也有很多空间。 请访问下面的URL获取完整的代码

---

给出

垂直对齐：顶部到所有页脚div。并从第一个div中删除
边距顶部：-10px
。您的问题将得到解决。
给出
垂直对齐：顶部到所有页脚div。并从第一个div中删除
边距顶部：-10px
。您的问题将得到解决。
它可能与
垂直对齐有关。我认为默认值是
垂直对齐：基线
，这就是为什么列在底部对齐的原因。请在您的列上尝试
vertical align:top
。谢谢，vertical align top工作它可能与
vertical align
有关。我认为默认值是
垂直对齐：基线
，这就是为什么列在底部对齐的原因。在您的列上尝试
垂直对齐：top
。谢谢，垂直对齐顶部工作很高兴知道它有帮助；）很高兴知道这有帮助；）
    li {
    list-style-type: none;
}
.imageDiv {
    background-color: #497DB9;
    display: block;
    width: 1350px;
    height: 70px;
}
.overlap1 {
    height:1022px;
    background-color:white;
    width:1300px;
}
.overlap {
    top: -50px;
    position: relative;
    left: 150px;
    background-color: white;
    width: 1000px;
    height:1100px;
}
#footerPage {
    background: #497DB9;
    margin-top: 80px;
    width:100%;
    height:190px;
}
#footerPageId {
    margin-left:129px;
    width:100%;
}
#footerLeft {
    display:inline-block;
    width: 20%;
    height:200px;
    margin-top: -10px;
}
#footercenter {
    display:inline-block;
    width: 20%;
    height:200px;
}
#partnerWithus {
    width: 20%;
    height:200px;
    display:inline-block;
}
#followUs {
    width: 20%;
    height:200px;
    display:inline-block;
}
#footerPageId ul>li>a {
    color:white
}
#followUs ul>li>a {
    color:white
}
#partnerWithUs a {
    color:white;
}