列表中的Textarea沒有對齊

Question

看着this simple code爲什麼textarea會被推下10/15像素？

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

我該如何解決這個問題？我希望textarea與列表一致。

Answer 1

div是block元素

所以在div

div { 
 
display:inline-block 
 
}

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

無論您使用float:left無論您使用display:inline-block（或內聯，這取決於你想要什麼）。但我建議你不要這樣做。使用float left將使元素脫離正常流程

浮動元素之後的元素將在其周圍流動。爲了避免這種情況，請使用clear屬性或clearfix hack。

Answer 2

這是因爲您使用了列表式。通過CSS

ul{ 
    list-style:none; 
} 

Answer 3

使用float:lett 試試這個刪除它，它工作正常：

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

Answer 4

HTML：

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

CSS：

.text-div{ 
    float: left; 
} 

希望有所幫助。