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中如下所示：

Image Display in Firefox

我正在为特定应用程序创建一个WYSIWYG编辑器。它大部分都已完成，我需要做的最后一件事就是把textarea后面的子弹点放到顶部而不是底部。

到目前为止，我已尝试将vertical-align更改为center，baseline和top到无序列表中的li元素，但没有成功。我还将列表样式位置更改为内部和外部。我搜索遇到此问题的其他人也没有改变任何东西。我能想到的唯一可能的工作就是相对定位li元素，然后添加一个绝对定位的子弹点图像，但我宁愿这是最后的手段。

有没有人有任何想法？我需要一个只使用HTML，CSS的解决方案，并且不确定为什么你需要它，但Javascript是可以的（不是JQuery）。它只需要在以后的Firefox版本中使用。根本不需要跨浏览器兼容性。

Answer 1

尝试将textarea设置为display: block

＆＃13;

textarea {
  display: block;
}

＆＃13;

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

＆＃13;

无法使用Textarea的无序列表中的子弹点位置

1 个答案: