如何使用CSS和HTML创建页脚网格？

Question

文件css

/* FOOTER NAV MENU */
#footer-navmenu {
background: black;
padding: 25px 0px;
font: ubuntu;
color: red;
}
#footer-navmenu h3{
    display: inline-block;
    color:  #ffffff;
    font: normal 25px 'Quango', cursive;
    margin-bottom: 20px;
    padding: 0px 0px 5px;
    border-bottom: 5px double #7FFFD4; 
}
#footer-navmenu h3 span{
    color:  #5383d3;
}
#footer-navmenu footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}
#footer-navmenu footer-links a{
    display:grid;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}
#footer-navmenu-container {
max-width: 1000px;
margin: 0 auto;
text-align: left;
}
#footer-navmenu ul {
list-style: circle;
margin: 0;
}
#footer-navmenu ul li {
display: grid;
margin: 6px 0;
}
#footer-navmenu ul li::after {
content:"";
}
#footer-navmenu ul li:last-child::after {
content:"";
}
#footer-navmenu ul li a {
color: white;
margin: 0 15px;
}
#footer-navmenu ul li a:hover {
color: $(navmenufooter.hover.color);
border-bottom: 2px solid $(navmenufooter.hover.color);
}

/* ASSET HIJABEN */

文件html

<!-- footer nav menu -->
<div id='footer-navmenu'>
<nav id='footer-navmenu-container'>

<!-- menu navigasi footer start -->
<h3>Hijaben<span>crew</span></h3>
   <ul>
    <li><a href="https://blog.xyz/">• HC Blog</a></li>
    <li><a href="https://www./p/radio-streaming-hijaben.html">• HC Radio</a></li>
    <li><a href="http://91/">• HC Webchat</a></li>
    <li><a href="https://www./p/join-hijaben-crew.html">• Rekrutmen</a></li>
    <li><a href="https://www.z/p/visi-misi.html">• Visi Misi</a></li>
    <li><a href="https://www/p/terms-of-use.html">• Ketentuan Pengguna</a></li>
    <li><a href="https://www./p/privacy-policy.html">• Kebijakan Privasi</a></li>
    <li><a href="https://www./p/donasi.html">• Donasi</a></li>
   </ul>
<!-- menu navigasi footer end -->
<p><div id='footer-navmenu'>
<h3>Thank's<span> To</span></h3>
   <ul>
    <li><a href="https://blog./">• HC Blog</a></li>
    <li><a href="https://www./p/radio-streaming-hijaben.html">• HC Radio</a></li>
    <li><a href="http://91./">• HC Webchat</a></li>
    <li><a href="https://www./p/join-hijaben-crew.html">• Rekrutmen</a></li>
    <li><a href="https://www./p/visi-misi.html">• Visi Misi</a></li>
    <li><a href="https://www.website.tld/p/terms-of-use.html">• Ketentuan Pengguna</a></li>
    <li><a href="https://www.website.tld/p/privacy-policy.html">• Kebijakan Privasi</a></li>
    <li><a href="https://www.website">• Donasi</a></li>
   </ul>
   </div>
   </p>
</nav>
</div>
<!-- footer nav menu end -->

这是结果Codepen.io results

我想像这样Footer Bottom

专家可以帮我解决这个问题吗？像那张照片！页脚底部在一个侧面或水平的容器中变平成几块图，只需要从顶部到底部或垂直]

文件css / *导航菜单* /＃footer-navmenu {背景：黑色；填充：25px 0px;字体：ubuntu;红色; }＃footer-navmenu h3 {display：inline-block;颜色：#ffffff;字体：普通...

Answer 1

也许您在使用display: inline-block;之后会遇到类似的情况>>

Answer 2

[如果要在左侧对齐<ul>，请记住<ul>在左侧有一些多余的边距和填充。

Answer 3

我不确定您想要什么。您是否要水平对齐列表组？ （每个ul）