Html 在 div 标签内右对齐菜单控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11715969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right align menu control inside a div tag
提问by HOY
When a new web application project in ASP.NET created, it comes with a NavigationMenu in site.master page which has 2 elements (Home & About), Please let me know how to align this menu to the right.
当在 ASP.NET 中创建一个新的 Web 应用程序项目时，它在 site.master 页面中带有一个 NavigationMenu，它有 2 个元素（主页和关于），请让我知道如何将此菜单向右对齐。
Here it's screenshot & code:
这是屏幕截图和代码：
<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>
Here is the rendered html code:
这是呈现的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>
Here CSS:
这里的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;
}
回答by Strelok
Add text-align: right;to the div.menustyle in Site.css.
添加text-align: right;到 中的div.menu样式Site.css。
Since something is adding a float:left;to the menu div, you need to override it in your CSS with float:right !important;as per Rajiv's suggestion. Make your CSS look like this:
由于某些内容正在向float:left;菜单 div添加 a ，因此您需要float:right !important;根据 Rajiv 的建议在 CSS 中覆盖它。让你的 CSS 看起来像这样：
div.menu
{
padding: 4px 0px 4px 8px;
text-align: right;
float: right !important;
}
The manual style being applied is probably due to some built-in menu styles. Check out the docs and the walk-throughs included there: http://msdn.microsoft.com/en-us/library/ecs0x9w5(v=vs.100) Especially the once related to ManuStyles and MenuItemStyles.
正在应用的手动样式可能是由于某些内置菜单样式。查看文档和其中包含的演练：http: //msdn.microsoft.com/en-us/library/ecs0x9w5(v=vs.100) 特别是与 ManuStyles 和 MenuItemStyles 相关的一次。
回答by Rajiv Pingale
If you want to make text inside the div to right align go for following code
如果您想让 div 内的文本右对齐，请转到以下代码
text-align:right;
But you if you want to move your whole div to right, you can go for
但是如果你想把你的整个 div 向右移动，你可以去
float:right
for information about "Float" property read this
有关“浮动”属性的信息，请阅读此内容
