は、ボタンは国境を提出していない - 高さ/アライメント問題

私はすぐに解決するように見えることはありません簡単な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の定型句に含まれているリセットCSSとYahooテキストサイジングを使用しています。

私は実際に余白や位置を修正したくないので、どんな助けも素晴らしいでしょう。

おかげ

EDIT - 私はHTML構造に

出典

2011-06-22 Finnnn

Chromeで問題が発生していますが、FFでは表示されません – Alex

ありがとう、私はChromeでもhttp://jsfiddle.net/LAzUf/で確認できます。何が起こっているのかまだ分かりません。 – Finnnn

これは動作するようです：http://jsfiddle.net/8BHtz/6/

私は山車を取り除き、pとformにdisplay: inline-block; vertical-align: middle;を追加しました。 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/（入力時にフロートが削除され、HTMLがわずかに変更されました） – webspy

私はちょうど私のページでそれを試して、それは動作します。残念ながら、バックエンドの人は私にHTML構造を変更させないので、私はそれを使うことはできません。私は今質問を編集するつもりはなかった。 – Finnnn

を変更することはできませんよ、私はjsFiddleにあなたのHTMLとCSSを接続したら、[OK]ルックス：http://jsfiddle.net/LAzUf/。火かぶりはありますか？入力タグが別の設定からスタイルを継承しているように見えますか？

出典

2011-06-22 12:52:33

私は火かき棒で今見ています、それは何かが継承を妨害しているようには見えません。私はそれを維持し、私は何かを見つけるかどうかを確認します。 - 編集 - Chromeのフィドルを見て、私が抱えている問題を確認できます。 – Finnnn

だから私はあなたの行の高さ：131％入力（同様にp）を置くと、それはクロムとFFで整列するように見えます。 http://jsfiddle.net/LAzUf/2/それはもっとそれに似ていますか？ –

は、ボタンは国境を提出していない - 高さ/アライメント問題

答えて

関連する問題