1

しばらくの間、ユーザーインターフェイスのロジックを解決しようとしています。あなたが想像できるように完全に新しく、それでもCSSのものを掘り下げています。

内側が固定幅で、左側にロゴ、右側にメニュー項目がある「バータイプ」のメニューを作成しようとしています。これが私が何を意味するかをあなたに伝えるための写真です：

アッパーバー-中央メニュー

これが私がどこまで行ったかです：http： //cssdeck.com/labs/31sxhkiv

問題は次のとおりです。バーの中央部分のフローティングセンターの右側にメニュー項目を配置する方法がわかりません。メニュー項目を右側にフロートさせて（順序が変更されます）、絶対値...それらのどれも役に立ちませんでした。

私はポイントを逃していると確信しているので、これについてSOに試してみたかったのです！

4

3 に答える 3

2 
#content{
    background-color: gray;
    height: 25px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    position:relative;    /* ADD THIS LINE */
}
#menu{                    /* ADD THIS STYLES */
    position:absolute;
    right:0px;
    top:0px;
}
于 2013-02-03T03:45:04.063 に答える
1

後で新しいアイテムを追加するのは面倒なので、絶対的なポジショニングはあなたが望むものではないと思います。これがあなたのcssdeckの私のフォークです。これはあなたが望んでいたものに近いと思いますが、あなたはその電話をかけなければなりません。私の主なアイデアは、メニューアイテムinline-blockをで作成しposition:relativeて、アイテムが正しい順序とレイアウトで適切にレンダリングされるようにすることです。相対的な位置にある場合でも、を使用してアイテムを左右に微調整できますmargin。

編集

今回は自分の仕事を救ったと思う新しいフォークを作成しました。また、私は先に進んでfloatパラダイムを残すことにしました。おそらくそれがあなたが望んでいたことだからです。#menu秘訣は、メニュー項目が左に浮く間、右に浮くように設定することです。追加するつもりはありませんでしたが、フローティング動作をクリアするために新しい行を追加することをお勧めします。

#menu:after { clear:float; }
于 2013-02-03T03:49:04.113 に答える
0

ulwithliアイテムを使用しdisplay: inlineて、比較的配置されたコンテナ内に絶対に配置できます。

于 2013-02-03T03:41:00.657 に答える