Căn chỉnh đầu vào html trên cùng một dòng

Question

Có thể ai đó đưa ra một giải pháp đơn giản về cách căn chỉnh đầu vào biểu mẫu trên cùng một dòng, ví dụ: nhiều lần khi tôi tạo biểu mẫu tôi có thể xếp chúng lên trên cùng nhau và có vẻ như âm thanh, nhưng nếu tôi đặt hai đầu vào giống như văn bản/văn bản bên cạnh văn bản hoặc nút khác, tôi sẽ nhận được sự khác biệt căn chỉnh theo chiều dọc. Có cách nào để khắc phục điều này mà không có vấn đề với lề và đệm?

ví dụ:

<style type='text/css'> 
    form{ 
    display:inline; 
    } 
    textarea{ 
    font-size:25px; 
    height:25px; 
    width:200px; 
    } 
    input.button{ 
    height:25px; 
    width:50px; 
    } 
</style> 
<form> 
    <textarea >Value</textarea><input type='button' class='button' value='Go'> 
</form> 

Answer 1

Các bạn đã thử chơi với vertical-align tài sản css?

vertical-align:top; 

Bằng cách đó tất cả mọi thứ sẽ xem xét phù hợp và bạn sẽ không phải chơi với lợi nhuận.

Answer 2

textarea,input.button{display:inline-block;} 

hoặc

textarea,input.button{float:left;} 

đưa đón bạn tùy thuộc vào cách bạn phản đối theo chiều dọc

Answer 3

<table> 
    <tr> 
    <td><input /></td> 
    <td><input /></td> 
    </tr> 
</table> 

Chắc chắn, nó làm cho CSS chủ nghĩa thuần túy cảm thấy lúng túng, nhưng nó chắc chắn dễ dàng ...

Answer 4

Thêm một vertical-align dường như work for me:

<style type='text/css'> 
    form{display:inline;} 
    textarea{width:200px;height:25px;font-size:25px;vertical-align:middle} 
    input.button{width:50px;height:25px;vertical-align:middle} 
</style> 
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form> 

Answer 5

Bạn thường có thể sử dụng display:inline-block; hoặc float:left; Bạn muốn các vật phẩm được làm to ở đầu hoặc cuối?

Trong ví dụ của bạn, bạn chưa đóng loại đầu vào, nó phải là type='button' - bạn đang thiếu apos.

Answer 6

Chỉ cần cho float:left vào textarea

http://jsfiddle.net/2qdJc/2/

Answer 7

Bạn có thể làm một cái gì đó như thế này (làm việc trong trường hợp của tôi):

<div style="width:150px"><p>Start: <input type="text" id="your_id"></p> 
    </div> 

<div style="width:130px;margin-left: 160px;margin-top: -52px"> 
<a href="#" data-role="button" data-mini="true">Button</a> 
</div> 

Đây là một bản demo: http://jsfiddle.net/gn3qx6w6/1/