0

既存のメニュー コントロールと同じ行に 2 つ目のメニュー コントロールを追加しようとしていますが、うまくいきません。

<div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                </Items>
            </asp:Menu>
            <asp:Menu ID="SmallMenu" runat="server" CssClass="smallMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Settings.aspx" Text="Settings"/>
                    <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin"/>
                </Items>
            </asp:Menu>
        </div>

CSS を使用してフォーマットしようとしましたが、機能していません。2 番目のメニューが新しい行に表示されます。ここで何が間違っていますか？

div.menu
{
    padding: 4px 0px 4px 8px;
    float:left;
    width:500px;
}

div.smallMenu
{
    padding: 4px 8px 4px 0px;
    width: 300px;
    float: right;
}

編集: div 内に配置し、2 番目のメニューを右にフロートさせると、それらを同じ行に表示できますが、右側のメニューの半分がページの右側 (外側) に表示されます。

4

2 に答える 2

1

これは、ブラウザのクライアント側デバッグツールを使用してデバッグする必要があるもののように聞こえます。あなたが説明したこと（右側のメニューの分割）から、CSS継承階層の上位にあるものがそのDIVの位置に影響を与えているように聞こえます。

もう1つ試すことができるのは、メニューをさらにネストすることです。

<DIV>
  <DIV style="float:left;">
     <DIV style="float:right;">
        <asp:Menu />
     </DIV>
     <asp:Menu />
  </DIV>
</DIV>

ETA： 同様の問題の投稿があります。上位2つの回答（この記事の執筆時点では、それぞれ7ポイントと5ポイント）には、試すことができるいくつかのことと、さらにいくつかのリンクがあります。

于 2012-11-01T22:11:46.887 に答える