将 <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>

如您在 fiddle 中所见，嵌入对象的项目符号位于底部。

是否可以在 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>

将 <li> 点放在顶部

Position the <li> dot at the top

css

html-lists