CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
OpCodeOmega
OpCodeOmega

Reputation: 319

Bootstrap list-inline li elements are staggered

I'm using the list-inline class of Bootstrap on an unordered list. I want to have all li elements the same size and to be perfectly aligned in rows.

I created a jsFiddle to demonstrate the problem. You'll need to expand the preview area in order fully see the problem.

The expected behaviour is that each li element will have the same width and height and be in a row (all on the same level). The actual behaviour is that the li elements are staggered.

What is causing the elements to stagger?

HTML

Documents

<ul class="list-inline box box20x25">
    <li>
        <p><i class="fa fa-home fa-fw"></i></p>
    </li>
    <li>
        <p class="title">Pteranodon was a flying reptile that lived during the time of the dinosaurs</p>
        <p class="description">Pteranodon was a flying reptile that lived during the time of the dinosaurs - it was not a dinosaur, but was a close relative of the dinosaurs. Pteranodon have three clawed fingers on each hand, and four clawed toes on each foot. Learn about Pteranodon, a.</p>
    </li>
    <li>
        <p class="title">Pteranodon was a flying reptile that lived during the time of the dinosaurs</p>
    </li>
</ul>

CSS

ul.box li {
    background: #000;
    color: #ccc;
}

ul.box20x25 li {
    height: 200px;
    width: 400px;
}

Upvotes: 0

Views: 722

Answers (1)

j08691
j08691

Reputation: 207953

All that list-inline does is change the display of the list items to display: inline-block;. Since the vertical alignment of inline items defaults to baseline, you want to change that by setting the vertical-align:top.

jsFiddle example

Upvotes: 2

Related Questions