我无法水平居中菜单栏。没有。主菜单项可能包含/Dec。每个用户登录。此代码使菜单栏从左侧开始为30%。 尝试显示:内联块和显示:#menuContainer表。
如果有5个主菜单项,并且我将#menuContainer的宽度设置为30%,则会显示居中。
ASPX:
<div id="divMenu">
<div id="menuContainer">
<asp:Menu id ="menuBar" runat="server" Orientation="Horizontal"
IncludeStyleBlock="false">
<item>
<asp:MenuItem Text="Home"></asp:MenuItem>
<asp:MenuItem Text="Folio">
<asp:MenuItem Text="Nature"></asp:MenuItem>
<asp:MenuItem Text="People">
<asp:MenuItem Text="Tribe"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Contact"></asp:MenuItem>
</items>
</asp:Menu>
</div>
</div>
CSS:
#divMenu
{
position:fixed;
left:0;
top:7%;
z-index:2;
width:100%;
height:5%;
}
#menuContainer
{
width:50%;
margin:0 auto;
}
#menuBar
{
position:fixed;
top:5.3%;
}
#menuBar ul
{
list-style:none;
background-color:silver;
padding:0 5px;
}
RENDERED HTML:
<div id="divMenu">
<div id="menuContainer">
<a href="#menuBar_SkipLink"><img alt="Skip Navigation Links" src="/..sometext"
width="0" height="0" style="border-width:0px;" /></a>
<div id="menuBar">
<ul class="level1">
<li><a class="level1" href="#" onclick="...">Home</a></li>
<li><a class="popout level1" href="#" onclick="..">Folio</a>
<ul class="level2">
<li><a class="level2" href="#" href="#" onclick="..">Nature</a></li>
<li><a class="level2" href="#" href="#" onclick="..">People</a>
<ul class="level3">
<li><a class="level3" href="#" onclick="..">Tribe</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="level1" href="#" onclick="...">Contact</a></li>
</ul>
</div><a id="menuBar_Skiplink"</a></div></div>
答案 0 :(得分:0)
<div id="divMenu">
<div class="menuContainer">
<a>Item 1</a>
<a>Item 2</a>
</div><br><br>
<div class="menuContainer">
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
</div><br><br>
<div class="menuContainer">
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
<a>Item 4</a>
</div><br><br>
</div>
-
-- css --
#divMenu {position:fixed;text-align:center;left:0;right:0;top:7%;z-index:2;height:5%;}
.menuContainer {display:inline-block;margin:0 auto;background-color:silver;text-align:left;clear:both;}