列表中的Textarea未对齐

Question

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

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

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

Answer 1

使用float:lett 试试这个，它工作正常：

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

Answer 2

div是block元素

因此，您要display:inline-block

使用div（或内联，取决于您想要的内容）

＆＃13;

＆＃13;

div {
display:inline-block
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您使用float:left。但我建议你不要这样做。使用float left将使元素脱离正常流

  

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

Answer 3

HTML：

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

CSS：

.text-div{
  float: left;
}

希望有所帮助。

Answer 4

这是因为你使用了list-style。通过css删除它

ul{
  list-style:none;
}