は、私がこのサイトの上に私のdivが正しく</p> <p><a href="http://www.touchoflunacy.com" rel="nofollow">touchoflunacy.com</a></p> <p>を働いていない理由を把握しようと一日中アーカムアサイラム状況に自分自身を駆動されているワードプレスのテーマで

Question

を親要素を見つけることができませんリンクと検索を含むdivが正しく整列していません。私はヘッダーのdivの周りに色々な色の20pxボーダーを追加して、編集する必要があるものを特定しましたが、ボーダーは表示されないので、何かがオーバーライドされていて、何を理解するか。

また、overflow：hiddenを追加しようとしました。ヘッダー（div＃search div＃ヘッダーdiv＃ヘッドバーなど）のすべての要素に加えて、#body要素と＃wrapperを無効にします。

誰かがどの要素を変えるべきか、私が使うべきことを誰かに教えてもらえれば、私はあなたに永遠の感謝と正しい答えに対する明確な投票を祝福します！

ありがとうございました！

Answer 1

Chromeの開発ツールやFirebugの要素を調べてみましたか？そうすることで、現在適用されているすべてのCSSスタイルが表示され、リアルタイムでそれらを編集して、何を変更する必要があるかを把握することができます。

問題の要素/領域を右クリックして検査するには、[要素の検査]を選択します。

Answer 2

設定している罫線が表示されていることを確認するには、それらを「重要」に設定してみてください。それはあなたが問題をデバッグするのに役立ちます。

div { 
    border: 1px solid #F00 !important; 
} 

Answer 3

私が気づいた最初のことは、あなたのdivをフローティングにすることです。私は、私が彼らに行きたいと思う場所にdivを配置するポジショニングを使って、より良い運を得ました。ここではいくつかのサンプルコードです（通常はcssファイルになりスタイリング）

<div style="position:relative;width:500px;height:28px;"><!-- Wrapper --> 
<div style="position:abolute;top:0;left:0;width:100px;">CONTENT</div> <!--first div located top left --> 
<div style="position:abolute;top:0;left:400px;width:100px;">CONTENT</div> <!--second div located top right --> 
</div> 

あなたはあなたの正確なレイアウトにdivをラインアップするためにこれができるようになります。

Answer 4

これらの人は正しいです、あなたはFirebugを使うことを学ぶ必要があります！時間を節約できます。

Firebugで10秒間表示される例では、ここで/wp-content/w3tc/min/e4c7880c.00cd94.cssにあるCSSファイルを2095行目でmargin-top：14pxから0pxに変更することができます。あなたの検索ボックスがナビゲーションメニューとインラインになるようになります。

私はclear：bothも削除します。検索要素から。私に見えるものからそれを必要としません。代わりに私はクリアを追加します：両方;次の水平divがフローティングヘッダー要素と重ならないように、Line 2054〜

次に、「#header #inner #logo a」要素から-220pxの上部を削除します。これは、行2062で重複する問題が発生するためです。負のトップの代わりに、ロゴ要素の高さをグラフィックファイルに合わせて調整します。だから2058行目で高さを変更します：高さは99px：ロゴの高さは122pxです。 （それは高さが99pxになるようにロゴのサイズを変更するか、サイズを変更します）。

あなたが持っている、私はあなたのサイトでこれらの変更のすべてをFirebugでライブテストしました！