Buộc một textarea là trên cùng một dòng với các yếu tố khác

Question

Tôi có một trang web với cách bố trí như sau:

Text    
Radio Button  
Radio Button  
Button 

Tôi muốn thêm một textarea đó sẽ là trên cùng một dòng như các yếu tố, như:

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

(các asterixes đánh dấu vị trí chiếm đóng bởi textarea)

Nhưng nó kết thúc lên được ngay dưới các yếu tố:

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

Tôi nên áp dụng kiểu CSS nào để giải quyết vấn đề này?

Answer 1

bạn cần phải nổi nội dung của bạn hoặc sử dụng inline-block tùy chọn

Dưới đây là một dụ về những gì bạn muốn: 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ạn sẽ cần phải làm nổi bật văn bản trái hoặc phải tùy thuộc vào bất kỳ điều gì phù hợp với bạn. Tuy nhiên, hãy cẩn thận, nếu bạn thả nổi textarea, bạn sẽ cần phải đánh dấu trên các phần tử khác.

Answer 3

Tôi khuyên bạn nên đóng gói các phần tử biểu mẫu gốc của bạn trong thẻ div để chúng được nhóm lại với nhau. Sau đó, áp dụng một phao cho div đó và vào vùng văn bản của bạn.

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

Sử dụng thành phần rõ ràng: để ngăn phần còn lại của nội dung trang (nếu có) bao quanh các phần tử biểu mẫu của bạn.

Answer 4

có những phương pháp khác nhau:

1) sử dụng bảng

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

2) Floating yếu tố để hướng trái

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

3) Thiết lập tài sản

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

inline-block

Lưu ý: Đặt cùng chiều cao cho cả vùng văn bản và văn bản c ontent div