I am currently facing a challenge while attempting to create four lists with different numbers of items and align them properly on my webpage.
After applying inline-block to the ul class, I encountered issues with alignment as illustrated below:
https://i.sstatic.net/DPked.png
The problem persists even when I try to make all the lists the same size, resulting in the following outcome:
https://i.sstatic.net/MMLvE.png
Below is the snippet of my HTML code:
<body>
<img src = "sample-img.png" class="center"/>
<div class= "externalMenu">
<ul class="exSection">
<li> <a href= "#">Packaging </li>
<li> <a href= "#">Packaging Org Chart </li>
</ul>
<ul class="exSection">
<li> <a href= "#">FAQs </li>
<li> <a href= "#">KB Articles </li>
<li> <a href= "#">Customer Survey </li>
<li> <a href= "#">EUCD Dashboard </li>
<li> <a href= "#">RSM Dashboard </li>
</ul>
<ul class="exSection">
<li> <a href= "#">SPT Maintenance Calendar </li>
</ul>
<ul class="exSection">
<li> <a href= "#">myEars </li>
<li> <a href= "#">SLM </li>
<li> <a href= "#">RSM </li>
<li> <a href= "#">Remedy </li>
<li> <a href= "#">Export </li>
</ul>
</div>
</body>
My CSS stylesheet looks like this:
*{
margin: 0;
padding: 0;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
.externalMenu{
width:100%;
}
.exSection{
background-color:yellow;
list-style-type:none;
display:inline-block;
border: 1px solid #000;
width: 200px;
height: 150px;
}