CODEWITHSUNDEEP
htmlcss
Alexander Espiritu
Alexander Espiritu

Reputation: 69

Align unordered lists with different number of list items

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.

Screenshot

If I set the lists to the same size this is what happens.

Screenshot

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;
}

Upvotes: 1

Views: 123

Answers (2)

buuhoodle
buuhoodle

Reputation: 1

//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;

}***

Upvotes: 0

joknawe
joknawe

Reputation: 1540

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.

Upvotes: 2

Related Questions