将<li>点放在顶部</li>

Question

我试图让列表中的项目符号在顶部而不是底部对齐。

以下是我的意思：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>

正如您在小提琴中看到的那样，嵌入对象的要点位于底部。

我可以在CSS中添加<li>样式，将其与顶部或其他方式对齐吗？

Answer 1

您应该垂直对齐<li>内的内容，而不是子弹本身。试试这个：

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

注意：您可能需要调整选择器;我只将规则适用于每个<li>的直系子女。根据您的需要或多或少地具体化。

updated fiddle。

Answer 2

您可以尝试这样的事情：

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>