リスト内のテキストエリアが整列していません

Question

this simple codeを見ると、なぜテキストエリアが10/15ピクセル下に押し込まれますか？

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

どうすればこの問題を解決できますか？私はリストとインラインでテキストエリアを持っていたい。

Answer 1

divはblock要素

あるので、あなたは（あなたが望むものに依存またはインライン）display:inline-blockを使用するかdiv

div { 
 
display:inline-block 
 
}

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

にあなたはfloat:leftを使用しますか。しかし、私はあなたがそれをしないことをお勧めします。 float leftを使用すると、通常のフローから要素が取り出されます。

要素はフローティング要素の周りを流れます。これを避けるには、clearプロパティまたはclearfix hackを使用します。

Answer 2

リストスタイルを使用しているからです。 float:lett はこれを試してみてください使用してCSS

ul{ 
    list-style:none; 
} 

Answer 3

を通してそれを削除し、それが正常に動作します：

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

希望。