1

私はCSSにかなり慣れていないので、助けが必要です。

現在、上部 100% の幅に 1 つのヘッダーがあり、コンテンツが 960 グリッド システムに従っているサイトを作成しています。

これまでのHTMLとCSSの作り方は次のとおりです。

<div id="header">
<div id="header-inner">
/logo/
/nav/
/search/
</div>
</div>

そしてCSS：

#header { background: red; }
#header-inner { margin: auto; padding: 25px 0; width: 940px; }

ヘッダーの内側に明確な修正を使用しましたが、すべて正常に機能していました。ロゴを IMG として挿入することで、ロゴの上部と下部の間に 25 ピクセルのスペースが確保され、ヘッダーの高さが「定義」されます。

ナビゲーションを UL/LI 要素として挿入した後でも、まだ機能していましたが、後で検索入力を追加すると、すべてが台無しになりました。フォームタグは、入力の周りに目に見えない境界線を与えているように見え、「必要」以上の高さを使用しています。

検索入力も大きくなり、明らかに新たな高みを形成しました。

代わりにヘッダーを作成するスマートで効果的な方法があるかどうか知りたかっただけですか? header-inner からパディングを削除したり、header-inner 親のすべての要素に padding-top と bottom を定義したりする必要はありません

4

1 に答える 1

0

リストでこれを行うことができます

<ul>
  <li>logo</li>
  <li>nav</li>
  <li>search</li>
</ul>

あなたはliの幅を設定することができます

于 2012-11-18T10:19:14.940 に答える