提交按鈕無國界 - 高度/對齊問題

一個簡單的CSS問題，我永遠不能似乎迅速修復 -提交按鈕無國界 - 高度/對齊問題

我有一行文字，然後它由一些看不見的輸入和一個提交按鈕的表單。我已刪除了邊境，並從提交所以只是文本背景 -

我的HTML -

<p>Posted about 21 hours ago.</p> 
<form class="button_to" data-remote="true" action="/comments/8/likes/114" method="post"> 
<input type="hidden" ...... > <!--not actual markup --> 
<input type="submit" value="unlike" html_options="classlike_button_form"> 
</form>

我的CSS -

p { 
    color: #595959; 
    float: left; 
    font: 85% "Arial",Verdana,sans-serif; 
    line-height: 131%; 
    padding-bottom: 0; 
} 

input { 
    background-color: transparent; 
    border: 0 none; 
    color: #3B5998; 
    font: 85% "Arial",Verdana,sans-serif; 
    float:left 
}

的問題是，在p文本標記和按鈕中的文本不是水平對齊的。

我正在使用包含在HTML5樣板中的reset css和Yahoo text sizing。

我真的不想用邊距或定位來解決它，所以任何幫助都會很棒。

感謝

編輯 - 我無法改變HTML結構

來源

2011-06-22 Finnnn

我在Chrome中看到了這個問題，但沒有在FF – Alex

謝謝，我也可以在Chrome瀏覽器中看到http://jsfiddle.net/LAzUf/。仍然不知道是什麼原因造成的。 – Finnnn

這似乎工作：http://jsfiddle.net/8BHtz/6/

我刪除了花車，並添加display: inline-block; vertical-align: middle;到p和form。它適用於Chrome，Firefox，Safari和IE8。但是，由於inline-block在IE7或更低版本中無法正常工作。由於p和form現在以內聯方式顯示，因此您可能需要將它們包裝在div（http://jsfiddle.net/8BHtz/7/）中。

來源

2011-06-22 13:16:53 webspy

我在Firefox 5上，但仍然略有偏差，我還以爲有可能在保留我的浮動的同時這樣做。 – Finnnn

http://jsfiddle.net/8BHtz/11/（float只在輸入時被移除，HTML稍微改變）？ – webspy

我剛纔在我的網頁上試過了，它可以正常工作。不幸的是，後臺人員不會讓我改變HTML結構，所以我無法使用它。我沒有在問題中說清楚，現在我將編輯它。 – Finnnn

當我插上你的HTML和CSS到的jsfiddle看起來不錯：http://jsfiddle.net/LAzUf/。你有Firebug嗎？它看起來像輸入標籤是從另一個設置繼承樣式？

來源

2011-06-22 12:52:33

我現在正在查看螢火蟲，它看起來不像任何東西干擾繼承。我會堅持下去，看看我能找到什麼。 - 編輯 - 您可以通過查看Chrome中的小提琴來查看我遇到的問題。 – Finnnn

所以，當我把你的行高：131％輸入（以及p）時，它看起來像在Chrome和FF中一致。 http://jsfiddle.net/LAzUf/2/更喜歡它嗎？ –

提交按鈕無國界 - 高度/對齊問題

回答

相關問題