Wymusza textarea być na tej samej linii z innymi elementami

Question

Mam stronę z następującym układzie:

Text    
Radio Button  
Radio Button  
Button 

chcę dodać textarea, który będzie na tej samej linii, elementów, takich jak:

Text   ********** 
Radio Button *Textarea* 
Radio Button ********** 
Button   ********** 

(z gwiazdkami oznaczyć miejsce zajmowane przez textarea)

Ale to kończy się tuż pod elementami:

Text    
Radio Button  
Radio Button  
Button   
********** 
*Textarea* 
********** 
********** 

Jaką stylizację CSS należy zastosować, aby rozwiązać ten problem?

Answer 1

trzeba unosić treści lub skorzystać z opcji

Tutaj inline-block jest exemple co chcesz: http://jsfiddle.net/uDLZF/3/

CSS

#first, #second{ 
    float:left; 
} 
ul { list-style-type: none; } 

HTML

<div> 
     <ul id="first"> 
      <li>Text </li>  
      <li>Radio Button </li> 
      <li>Radio Button </li> 
      <li>Button </li>   
     </ul> 
     <ul id="second"> 
      <li>**********</li> 
      <li>*Textarea*</li> 
      <li>**********</li> 
      <li>**********</li>   
     </ul> 
    </div> 

Answer 2

Będziesz musiał unieść tekst w lewo lub w prawo w zależności od tego, co działa dla ciebie. Uważaj jednak, jeśli będziesz unosić tekst, musisz umieścić znacznik nad pozostałymi elementami.

Answer 3

Proponuję enkapsulację elementów formularza początkowego w znaczniku div, aby były one zgrupowane razem. Następnie zastosuj spławik do tego elementu div i do obszaru tekstowego.

<div style="float: left;"> 
    Text 
    ... 
    Button 
<div> 
<textarea style="float: left;"></textarea> 
<div style="clear: both;"></div> 

Użyj elementu z czystym: oba, aby zapobiec zawijaniu pozostałej części strony (jeśli jest) wokół elementów formularza.

Answer 4

istnieją różne metody:

1) za pomocą tabeli

<table> 
    <tr> 
    <td> Text Goes here... </td> 
    <td> Textarea goes here </td> 
    </tr> 
</table> 

2) pływający element do lewej

<div style="float:left"> Text goes here </div> 
<textarea style="float:left"></textarea> 
<div style="clear:both"></div> 

3) ustalanie własności inline bloku

<div style="display: inline-block; "> Text goes here.. </div> 
<textarea></textarea> 

Uwaga: Ustaw tę samą wysokość zarówno dla obszaru tekstu, jak i c ontent div