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

Question

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

<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 中看起来像这样：

火狐中的图像显示

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

到目前为止，我已经尝试将垂直对齐更改为无序列表中的中心、基线和顶部到 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>