0

私は現在ウェブサイトをデザインしており、上部にナビゲーション用のメニューバーがあります。それはすべて 1 つのテーブルと CSS として行われます。これはすべてのブラウザーでうまく機能しますが、ナビゲーション ボタンを左側に、ログイン ボタンとホーム ボタンを右側に配置したいと考えています。

右側のボタンを独自の div に配置し、position: fixed 要素を使用して配置することで、これを簡単に行うことができます。ただし、ご存じのとおり、これは Internet Explorer では機能しません。私の div メソッドはそもそも一種の回避策であるため、IE のためだけに私の回避策に別の回避策を追加したくありません。

そこで、メニュー バー全体を 2 行ではなく 1 行にまとめて、右側のボタンのセルを右側に配置し、左側のボタンのセルを左側に配置する方法はないかと考え始めました。それは私の div の回避策よりもはるかにきれいで、IE で動作すると思います。それが可能かどうかはわかりませんが、何も見つかりません。私が提案した方法とは異なる方法であっても、助けていただければ幸いです。

4

2 に答える 2

1

まず第一に、position: fixedスクロールアップまたはダウンに関係なく、ブラウザーウィンドウのこの位置に投稿を保持します。それがあなたが探している動作でよろしいですか?

あなたの問題については、1 つの大きな div を作成して、2 つの小さな div を囲み、ページの上に配置する必要があります。次に例を示します。

<div id="top-bar">
<div id="rightbuttons">Three | Four</div>
<div id="leftbuttons">One | Two</div>
</div>

この例では、バー全体を上に配置します。

#top-bar { position: absolute; width: 100%; left:0; right:0; }

次に、内側のバーを配置するために、floatプロパティを使用します。このプロパティにより、要素をどちらの位置でも「浮動」させることができます。

#rightbuttons { float: right; }
#leftbuttons { float: left; }

次に、フローティング div がコンテンツに応じて外側の div の高さを維持するようにするための「ハック」として、それに追加overflow:hiddenします。

#top-bar { position: absolute; width: 100%; left:0; right:0; verflow: hidden; }

これが実際の例です。

于 2012-06-21T19:52:35.713 に答える
0

これは本当に簡単な修正です。CSS を別のファイルに入れる方法を知っている場合はそうしてください。それ以外の場合は、head セクションに入れることができます。

HTML:

<table>
<tr>
    <td>Nav 1</td>
    <td>Nav 2</td>
    <td>Nav 3</td>
    <td class="right">Login</td>
    <td class="right">Home</td>
</tr>
</table>

CSS:

table {
    width: 100%;
}

.right {
    float:right;
}

検索エンジンにはあまり好まれませんが、次のようにインラインで投稿することもできます。

<table>
<tr>
    <td>Nav 1</td>
    <td>Nav 2</td>
    <td>Nav 3</td>
    <td style="float:right">Login</td>
    <td style="float:right">Home</td>
</tr>
</table>
于 2012-06-21T20:00:51.963 に答える