4

ASP.NET で新しい Web アプリケーション プロジェクトを作成すると、site.master ページに 2 つの要素 (Home と About) を持つ NavigationMenu が追加されます。このメニューを右に揃える方法を教えてください。

ここにスクリーンショットとコードがあります：

ここに画像の説明を入力

<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="AnaSayfa"/>                 
            <asp:MenuItem NavigateUrl="~/About.aspx" Text="Hakkında" />
        </Items>
    </asp:Menu>
</div>

レンダリングされた html コードは次のとおりです。

<div style="float: left;" id="NavigationMenu" class="menu">
    <ul style="width: auto; float: left; position: relative;" class="level1 static" role="menubar"
        tabindex="0">
        <li style="float: left; position: relative;" class="static" role="menuitem"><a class="level1 static"
            tabindex="-1" href="Default.aspx">Ana Sayfa</a></li>
        <li style="float: left; position: relative;" class="static" role="menuitem"><a class="level1 static"
            tabindex="-1" href="About.aspx">Hakkında</a></li>
    </ul>
</div>

ここにCSS：

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
    text-align: right;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}
4

2 に答える 2

6

のスタイルに追加text-align: right;します。div.menuSite.css

メニュー div に何かが追加されているため、 Rajiv の提案に従ってfloat:left;、CSS でそれをオーバーライドする必要があります。float:right !important;CSS を次のようにします。

div.menu
{
    padding: 4px 0px 4px 8px;
    text-align: right;
    float: right !important;
}

手動スタイルが適用されているのは、組み込みのメニュー スタイルが原因である可能性があります。そこに含まれているドキュメントとウォークスルーをチェックしてください: http://msdn.microsoft.com/en-us/library/ecs0x9w5(v=vs.100 ) 特に、かつて ManuStyles と MenuItemStyles に関連していたもの。

于 2012-07-30T05:59:58.277 に答える
0

div内のテキストを右揃えにしたい場合は、次のコードに進みます

text-align:right;

しかし、div全体を右に移動したい場合は、

float:right

「Float」プロパティの詳細については、これをお読みください

別のdiv内に3つのdiv(左/中央/右)を揃える方法は?

于 2012-07-30T06:16:19.343 に答える