CODEWITHSUNDEEP
htmlcss
vishnu
vishnu

Reputation: 2948

ul li listing not proper alignment

I have used ul li for listing thumbnails & text in center position, but when we add more content to any li, others aligning in to the bottom.. Any solution for align li's with same level?

Used code: (added few more content in second li, see.. other li's position moved to bottom level, why it happens?)

.our-team ul {
    width: 100%;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.our-team ul li {
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 20px;
    width:25%
}
.our-team ul li img {
    width: 100%;
    max-width: 100%;
    border: 4px solid #f2f2f2;
}
.our-team ul li section {
    display: inline-block;
    width: 100%;
}
figure {
    margin: 0;
    float: left;
}
<div class="our-team">
  <ul class="list-6">
    <li>
      <figure><img src="http://placehold.it/300x300"></figure>
      <section><h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit</p></section>
    </li>
    <li>
      <figure><img src="http://placehold.it/300x300"></figure>
      <section><h3>sed do eiusmod tempor</h3>
      <p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></section>
    </li>
    <li>
      <figure><img src="http://placehold.it/300x300"></figure>
      <section><h3>eiusmod tempor</h3>
      <p>consectetur adipiscing elit</p></section>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 46

Answers (2)

ashish singh
ashish singh

Reputation: 6904

the problem is your li's are of different height .. but they are aligning along baseline .. you just say vertical-align: top and they align at top

.our-team ul {
    width: 100%;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.our-team ul li {
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 20px;
    width:25%;
    vertical-align: top; /* this was added in answer */
    
}
.our-team ul li img {
    width: 100%;
    max-width: 100%;
    border: 4px solid #f2f2f2;
}
.our-team ul li section {
    display: inline-block;
    width: 100%;
}
figure {
    margin: 0;
    float: left;
}
<div class="our-team">
<ul class="list-6">
<li>
<figure><img src="http://placehold.it/300x300"></figure>
<section><h3>Lorem ipsum dolor sit amet</h3>
<p>consectetur adipiscing elit</p></section>
</li>
<li>
<figure><img src="http://placehold.it/300x300"></figure>
<section><h3>sed do eiusmod tempor</h3>
<p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></section>
</li>
<li>
<figure><img src="http://placehold.it/300x300"></figure>
<section><h3>eiusmod tempor</h3>
<p>consectetur adipiscing elit</p></section>
</li>

</ul>
</div>

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

Try This one You can changed display: inline-block; to flot:left;

.our-team ul {
    width: 100%;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.our-team ul li {
   float: left;
    padding: 0 5px;
    margin-bottom: 20px;
    width:25%
}
.our-team ul li img {
    width: 100%;
    max-width: 100%;
    border: 4px solid #f2f2f2;
}
.our-team ul li section {
    display: inline-block;
    width: 100%;
}
figure {
    margin: 0;
    float: left;
}
<div class="our-team">
<ul class="list-6">
<li>
<figure><img src="http://placehold.it/300x300"></figure>
<section><h3>Lorem ipsum dolor sit amet</h3>
<p>consectetur adipiscing elit</p></section>
</li>
<li>
<figure><img src="http://placehold.it/300x300"></figure>
<section><h3>sed do eiusmod tempor</h3>
<p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></section>
</li>
<li>
<figure><img src="http://placehold.it/300x300"></figure>
<section><h3>eiusmod tempor</h3>
<p>consectetur adipiscing elit</p></section>
</li>

</ul>
</div>

Upvotes: 1

Related Questions