Align unordered lists with different number of list items
Question
I'm trying to make 4 lists with items on them but I'm having problems trying to align them because the four lists that I have have varying number of items.
When I try to use inline-block on the class of the ul, this is the result.
If I set the lists to the same size this is what happens.
Here's my HTML:
<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>
While here's my CSS:
*{
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;
}
2 answers
solution1
2 ACCPTED 2018-06-25 02:09:35
add vertical-align: top; to your .exSection:
.exSection{
background-color:yellow;
list-style-type:none;
display:inline-block;
border: 1px solid #000;
width: 200px;
height: 150px;
vertical-align: top;
}
you will not need the height: 150px; - unless you want it explicitly set.
solution2
0 2018-06-25 02:41:08
//Add your exernalMenu display property block
externalMenu{
width:100%`;
display: block;
}
//change display property to float property in exSection and give value of left. //Give som margin to be wider to each other.
.exSection{
background-color:yellow;
list-style-type:none;
float: left;
margin-left: 10px;
border: 1px solid #000;
width: 200px;
height: 150px;
}***
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.