フォーム要素が予想よりも低かった。わからない理由

drupalサイト（http://dev.thompsonsurgical.com/）のテーマ作成に取り掛かっています。右上に検索項目の位置を特定できません。問題の要素を囲むように1pxの境界線を持つコンテナを配置し、問題の説明に役立てます。私は入力フィールドを約5pxだけ下げているのは分かりません。誰かが私を正しい方向に向けることができますか？フォーム要素が予想よりも低かった。わからない理由

.container-inline div, .container-inline label { display:inline }

私はそれを取り除くと、それはトップに行くfloat:leftを追加取得した場合：

出典

2011-07-26 Brett F

あなたは、少なくとも私たちに関連するCSSを与える必要があります。また、ヘッダートップの 'div'にHTMLの部分を貼り付けることをお勧めします。 – trutheality

謝罪します。私はここに新しいです、そして、どのCSSが関連していたのかわかりませんでした（そしてたくさんあります）ので、私はちょうどページへのリンクを与えました。次回はコードを追加します。 –

これはそれをしない：

#edit-search-block-form--2 { 
border: 1px solid #E8E8E8; 
height: 18px; 
margin-top: 0; 
padding: 0; 
vertical-align: top; // modified 
}

出典

2011-07-26 20:30:49 Sparkup

このソリューションは、実際にはより意味をなさせるために判明し、はるかにクリーンでした。ありがとう！ –

私は放火犯であなたのCSSで遊んと、それはこのようになりますが犯人です。他のhtml要素のために、それは右側にあります。それを使って遊んでみてください。

出典

2011-07-26 20:20:26 locrizak

それはそれでした！私は走らなければなりませんが、明日もう少しそれを微調整します。本当にありがとう！ –

あなたは "周りに遊んではいけません"、代わりにCSSを理解しようとする= p – MatTheCat

ちょうど私がどのように学んだか。私が探しているものが分かっていたので、なぜそれが起こっていたのかを理解するために働いた – locrizak

何らかの理由で<label>タグが表示されていないか、入力をラッピングしていますが、Chromeのインスペクタで表示されたときにラベルがコンテンツを押し下げていたため、入力と否定を設定するtopプロパティ

出典

2011-07-26 20:22:59 Seth

これは、画像の下にいくらかのスペースを置くベースラインのデフォルトの垂直方向の整列のためです。したがって、<input />はリンクと整列しているだけです。

<img />および<input />の要素には、vertical-align:middle;を追加します。

出典

2011-07-26 20:25:37 MatTheCat

フォーム要素が予想よりも低かった。わからない理由

答えて

関連する問題