La zone de texte d'une liste n'est pas alignée

Question

En regardant this simple code pourquoi la zone de texte est-elle enfoncée de 10/15 pixels?

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

Comment puis-je résoudre ce problème via css? Je souhaite que la zone de texte soit en ligne avec la liste.

Answer 1

div est un élément block

Donc, soit vous utilisez display:inline-block (ou en ligne, en fonction de ce que vous voulez) sur la div

div { 
 
display:inline-block 
 
}

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

Soit vous utilisez float:left. Mais je suggère que vous ne le fassiez pas. L'utilisation de float à gauche sortira l'élément du flux normal

Les éléments après un élément flottant circuleront autour de lui. Pour éviter cela, utilisez la propriété clear ou le hack clearfix.

Answer 2

c'est parce que vous avez utilisé le style liste. retirez-le par css

ul{ 
    list-style:none; 
} 

Answer 3

En utilisant float:lett Essayez cela, il fonctionne très bien:

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

espoir qui aide.