html - 使文本区域的第一行与列表项中的元素符号位于同一位置

Question

我有<ul>列表。

对于每个 li我修改了元素符号样式:

ul {
    list-style: none;
}

ul li:before{
    content: "\2022";
    font-size: 170%;
    margin-left: -16px;
}

我的列表如下:

<ul>
    <li>
        <textarea name="txtBullet1" rows="2" cols="70" id="txtBullet1" tabindex="20" onkeyup="maxLen(this);" required="required" style="width:100%;"></textarea>
    </li>
</ul>

但是 textArea 比我的子弹要高。我试过了 padding和 margin将其降低，但无济于事

Answer 1

您可以将 vertical-align:middle; 与 textarea 和 bullet 一起使用

ul {
    list-style: none;
}

ul li:before{
    content: "\2022";
    font-size: 170%;
    margin-left: -16px;
    vertical-align:middle;
}
textarea {
  padding:0;
  vertical-align:middle;
}

<ul>
    <li>
        <textarea name="txtBullet1" rows="2" cols="70" id="txtBullet1" tabindex="20" onkeyup="maxLen(this);" required="required" style="width:100%;"></textarea>
    </li>
</ul>