在同一行上對齊html輸入

有人可以給出一個簡單的解決方案，例如，如何在同一行上對齊表單輸入，例如，當我構建表單時，我可以讓它們互相對齊它看起來很合理，但如果我把兩個輸入像textarea /文本旁邊的另一個文本或按鈕，我得到垂直對齊的差異。有沒有辦法解決這個問題，而不用擺弄邊距和填充？在同一行上對齊html輸入

例如：

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

來源

2011-12-20 Ryan Stortz

確保你沒有清楚：留在某處 – zok 2012-06-20 21:19:54

您是否嘗試過與垂直對齊CSS屬性玩？

vertical-align:top;

這樣一切都會看起來一致，你將不必玩邊緣。

來源

2011-12-20 14:43:59 Rondel

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

或

textarea,input.button{float:left;}

取決於哪種方式你挑你的垂直挑戰

來源

2011-12-20 14:43:18

謝謝，但我可以讓他們在同一行上，只是當我這樣做時，他們是我垂直不同的地方無論如何，我嘗試了這兩種方式，並沒有什麼區別。 – 2011-12-20 14:46:19

你想要哪個路線？頂部還是平底？ – 2011-12-20 14:54:24

此外 - 請確保您有有效的文檔類型，並使窗體塊元素，因爲你會得到更可靠的結果。 – 2011-12-20 14:57:38

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

當然，它使CSS較真的蠕動，但它肯定容易...

來源

2011-12-20 14:44:04 ShaneBlake

而HTML純粹主義者，和JavaScript純粹主義者，以及一般網頁開發人員... – David 2011-12-20 14:47:47

帶來的仇敵... – ShaneBlake 2011-12-20 14:48:44

我喜歡這個想法，但我想從這個頁面的表格移開，因爲所有的內容正在加載。 – 2011-12-20 14:50:53

添加vertical-align似乎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>

來源

2011-12-20 14:44:42 David

太好了。我希望它能夠跨瀏覽器工作 – 2011-12-20 14:51:25

@RyanStortz：不能肯定地說。我在Firefox 8.0上。似乎也在IE 9.0中工作。（雖然在後者有'textarea'這是醜陋的滾動按鈕，你可能想明確地刪除那些默認添加它們的瀏覽器。） – David 2011-12-20 14:53:59

是的，它是爲我工作。我有一個簡單的js函數，可以爲每個換行符增加textarea的高度，所以它不是問題。 – 2011-12-20 14:57:01

通常可以使用display:inline-block;或float:left;你想要項目在頂部或底部進行清理？

在你的例子中，你還沒有關閉輸入類型，它應該是type='button' - 你錯過了一個apos。

來源

2011-12-20 14:45:09

只要給float:left到textarea的

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

來源

2011-12-20 14:46:04

我真的有一個反對花車的東西，他們看起來對我來說太隨意了，但是謝謝我認爲我現在可以開始工作了。 – 2011-12-20 14:52:00

你可以做這樣的事情（在我的情況下工作）：

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

這裏是一個演示：http://jsfiddle.net/gn3qx6w6/1/

來源

2014-09-30 08:20:24

簡單而好的例子。謝謝。 – 2016-05-13 14:03:38

在同一行上對齊html輸入

回答

相關問題