在div標籤內右對齊菜單控件

當ASP.NET中創建了一個新的web應用程序項目時，它在site.master頁面中有一個NavigationMenu，它有2個元素（主頁&關於），請讓我知道如何對齊這個菜單在右邊。在div標籤內右對齊菜單控件

這是截圖&代碼：

enter image description here

<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; 
}

來源

2012-07-30 HOY

它會更有助於顯示呈現的HTML而不是.NET代碼。 – steveax 2012-07-30 06:06:55

@steveax我已經添加了它，但正如我所說的那樣，它是默認菜單，我沒有添加外部代碼，只是創建了一個新項目並敲擊右邊的菜單 – HOY 2012-07-30 06:24:01

將text-align: right;添加到div.menu樣式中Site.css。

由於東西在菜單div中添加了float:left;，所以您需要按照Rajiv的建議在您的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-30 05:59:58 Strelok

它不起作用:(我剛剛創建了一個新的項目，並添加了文本對齊到site.css，而不是更多。 – HOY 2012-07-30 06:13:20

@HOY看到我更新的答案。 – Strelok 2012-07-30 07:08:00

你的方式正在爲我工作，但我仍然困惑內聯的CSS來自哪裏，因爲改變它 – HOY 2012-08-01 06:27:38

如果你想在div內的文本右對齊去下面的代碼

text-align:right;

不過你，如果你想將你的整個股利的權利，你可以去

float:right

約「浮動」屬性的信息閱讀本

How to align 3 divs (left/center/right) inside another div?

來源

2012-07-30 06:16:19

我希望菜單控件位於div的右側，而不是文本，兩者都不起作用，你可以在呈現的html中看到，有float：left，我檢查了它，它說這個css的位置是內聯樣式表，但我無法在代碼也是。 – HOY 2012-07-30 06:36:42

在div標籤內右對齊菜單控件

回答

相關問題