CODEWITHSUNDEEP
csshtml-lists
Vincent Lee
Vincent Lee

Reputation: 187

Position the <li> dot at the top

I'm trying to get the bulletpoint in a list to align at the top of the instead of the bottom.

Here is an example of what I mean: https://jsfiddle.net/2ma994cr/

<ul class="a">
    <li>Thing 1</li>
    <li><iframe width="420" height="315" src="https://www.youtube.com/embed/3B49N46I39Y" frameborder="0" allowfullscreen></iframe></li>
    <li>Thing 3</li>
</ul>

As you can see in the fiddle, the bulletpoint for the embedded object is at the bottom.

Is there an <li> style I can add in CSS that will align it to the top or another way around this?

Upvotes: 4

Views: 9971

Answers (2)

ByteHamster
ByteHamster

Reputation: 4951

You could try something like this:

li {
  display: block;
}
li:before{
  content: "•";
  vertical-align: top;
  margin-right: 10px;
}
<ul class="a">
    <li>Thing 1</li>
    <li><iframe width="420" height="315" src="https://www.youtube.com/embed/3B49N46I39Y" frameborder="0" allowfullscreen></iframe></li>
    <li>Thing 3</li>
</ul>

Upvotes: 0

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107566

You should vertically align the content within the <li>, not the bullet itself. Try this:

li > * {
    vertical-align: text-top;
}

Note: You may need to adjust the selector; what I have only applies the rule to the immediate children of each <li>. Make it more or less specific according to your needs.

An updated fiddle.

Upvotes: 17

Related Questions