0

div の上にボタンを追加したい (ほとんどの Web サイトのメイン メニューのように)。昨日、ボタンごとに異なる div タグを使用して多くの余白を追加してボタンを作成しましたが、最終結果は Internet Explorer でうまく機能しなかったため、別の方法を使用することにしました。DL タグもうまく機能しませんでした。スパン タグを試してみましたが、それでも目的の場所に配置できません。マージンが反応せず、どうすればよいかわかりません。PS: ヘッダー div にも左側に 2 つの画像があり、ボタンを右側に配置したいと考えています。

4

2 に答える 2

0

外側のラッパーを作成する

<div class="menu-wrapper">
</div>

上記のように、メニューには ul と li を使用します。これは、ほとんどまたは少なくとも最も頻繁に使用される標準の一種です。上記のラッパー内で、関連するリンクを含む次の順序付けられていないリストを使用します。

<ul class="menu">
    <li><a>Home</a></li>
    <li><a>Contact</a></li>
    <li><a>About</a></li>
</ul>

スタイリングと、ヘッダーに画像があるため (それらを div でラップしてフロートするか、Twitter Bootstrap などのスキャフォールディング グリッドを使用する場合は +1 を使用できます)、メニュー ラッパーをフロートする必要があります。ul の上に浮かぶこともできますが、これは特に私が好きな方法です。

div.menu-wrapper { float: right; }
ul.menu li { display:-moz-inline-stack; display:inline-block;zoom:1;*display:inline;}
ul.menu li a { display:block; padding: 6px 12px; }
ul.menu li a:hover { /* some nice hover style here */}

上記により、正しい方向に進むはずです。上記の li スタイルは、クロス ブラウザーのインライン ブロックを使用しています。必要に応じて、浮かせることもできます。

ちなみに、私は css のスタイルをやや冗長にしていますが、それが気に入らない人もいるので、各要素に自由に名前を付けて、それに応じてスタイルを設定してください。これは、自動インデントなどのように、エディターで私が好む方法です。

于 2013-05-19T17:14:58.133 に答える
0

書式設定/スタイリングに関しては、タグは重要ではありません。一般的に使用されるタグ (div、span、li など) のほとんどは異なる「デフォルト」プロパティを持っているため、ルック/フィールに関してタグで何をしたいかによって異なります。

CSS を使用すると、これらの要素を好きなように見せることができます。これらはすべて、純粋に文体的な観点から許容できるオプションです。残念ながら、Internet Explorer で表示すると、多くのフロントエンド開発者の悩みの種であるスタイルに矛盾が生じることがよくありますが、問題を調査して条件付きスタイルを使用することで、Internet Explorer の問題を修正できます。

これらのトピックに関するいくつかの出発点:

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

セマンティックの観点から、html5 マークアップでは、トップレベルのサイト ナビゲーション構造を構築していることを示すために、nav タグを使用してメイン メニューを構築することが一般的に推奨されます。一般的に言えば、navタグはulをラップし、それが一連​​のliをラップします。

<nav id="main-menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/pageX">Page X</a></li>
        ...
    </ul>
</nav>

詳細については、http: //html5doctor.com/nav-element/をご覧ください。

于 2013-05-19T17:20:13.063 に答える