列表中的文本区域未对齐答案

【问题标题】：Textarea within a list is not aligned列表中的文本区域未对齐
【发布时间】：2017-08-14 08:52:36
【问题描述】：

看看 this simple code 为什么 textarea 被向下推 10/15 像素？

<ul>
  <li>
    <div>
      <textarea></textarea>
    </div>
  </li>
</ul>

如何通过 css 解决这个问题？我希望 textarea 与列表内联。

【问题讨论】：

标签： html css

【解决方案1】：

div 是一个block 元素

所以你要么在div 上使用display:inline-block（或内联，取决于你想要什么）

div {
display:inline-block
}

<ul>
  <li>
    <div>
      <textarea></textarea>
    </div>
  </li>
</ul>

您要么使用 float:left 。但我建议你不要那样做。使用 float left 会使元素脱离正常流程

浮动元素之后的元素将围绕它流动。为避免这种情况，请使用 clear 属性或 clearfix hack。

【讨论】：

【解决方案2】：

使用float:lett 试试这个，效果很好：

<ul>
  <li>
    <div style = 'float:left' >
      <textarea></textarea>
    </div>
  </li>
</ul>

【讨论】：

【解决方案3】：

HTML：

    <ul>
      <li>
        <div class="text-div">
          <textarea></textarea>
        </div>
      </li>
    </ul>

CSS：

.text-div{
  float: left;
}

希望对您有所帮助。

【讨论】：

【解决方案4】：

这是因为您使用了列表样式。通过css删除它

ul{
  list-style:none;
}

【讨论】：