无序列表中的项目符号点位置不适用于文本区域

Question

通常，当我在 HTML 中创建无序列表时，它会将项目符号点对齐到文本的顶部。如果我在 li 元素中放置一个 input 元素，那么它将在中间对齐。这一切都很好，除了当我添加一个文本区域元素时它会对齐到它的底部。这是一个例子：

<ul>
    <li>Bullet is at <br/>the top</li>
    <li><input type="text" value="Bullet is centered" /></li>
    <li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>

以上代码在 Firefox v60.0 中如下所示：

Image Display in Firefox

我正在为特定应用程序创建所见即所得的编辑器。它基本完成了，我需要做的最后一件事是让文本区域后面的项目符号指向顶部而不是底部。

到目前为止，我已经尝试将垂直对齐更改为居中、基线和顶部到无序列表中的 li 元素，但没有成功。我还将列表样式位置更改为内部和外部。我对其他遇到此问题的人的搜索也没有任何结果。我认为唯一可行的方法是相对定位 li 元素，然后添加绝对定位的项目符号图像，但我希望这是最后的手段。

有人有什么想法吗？我需要一个仅使用 HTML、CSS 的解决方案，不确定您为什么需要它，但 Javascript 可以（而不是 JQuery）。它只需要在更高版本的 Firefox 中工作。根本不需要跨浏览器兼容性。

Answer 1

尝试将 textarea 设置为 display: block

textarea {
  display: block;
}

<ul>
    <li>Bullet is at <br/>the top</li>
    <li><input type="text" value="Bullet is centered" /></li>
    <li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>

无序列表中的项目符号点位置不适用于文本区域

Bullet Point Position In An Unordered List Not Working With A Textarea

html

css

wysiwyg

textarea

html-lists