Question

我已经搜索了问题的答案的高低，但似乎没有任何工作，所以希望有人可以帮助我。

我正在尝试将我的顶级导航菜单放在我的SharePoint网站中心，但没有任何运气。我尝试在NavMainBar类下指定宽度，margin：0 auto和text-align = center以及其他各种建议。无论我在尝试什么，子站点（文本）总是左对齐。我确信这是次要的，但对于我的生活，我错过了一些东西。

附加了CSS的片段。希望有人能告诉我哪里出错了。

编辑：添加了一个屏幕转储，让我自己更清楚我遇到的问题。我需要在菜单的子网站中移动文本，即Forms，Infopath，Test 1等，到页面中间。基本上，只将topnav菜单中的标题文本居中，而不是下拉列表中的项目

http://i.imgur.com/mYcgR9g.png

干杯

/* Top Menu */
.NavMainBar {position:relative; width:100%; text-align:center; height:40px; padding-bottom:1px; border:0px solid #000;}
.NavBarIn {float:left; padding-left:10px; height:40px; }
.NavBarLeft {float:left; height:40px; width:9px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarLeft.png');*/ background-repeat:no-repeat;}
.NavBarRight {float:left; height:40px; width:9px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarRight.png'); */ background-repeat:no-repeat;}
.NavBarFill {float:left; width:98%; height:40px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarFill.png'); */ background-repeat:repeat-x;}

编辑：添加HTML - 对其他类的引用是对库存标准core4v.css

<div id="zz16_TopNavigationMenuV4" class="s4-tn">
<div class="menu horizontal menu-horizontal">
    <ul class="root static">
        <li class="static"><a class="static menu-item" href="/forms/SitePages/Home.aspx" accesskey="1"><span class="additional-background"><span class="menu-item-text">Forms</span></span></a></li><li class="static dynamic-children"><a class="static dynamic-children menu-item" href="/infopath/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Infopath</span></span></a><ul class="dynamic">
            <li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/infopath/_layouts/viewlsts.aspx?BaseType=0"><span class="additional-background"><span class="menu-item-text">Lists</span></span></a><ul class="dynamic">
                <li class="dynamic"><a class="dynamic menu-item" href="/infopath/Lists/TimeInLieu/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">TimeInLieuMaster</span></span></a></li><li class="dynamic"><a class="dynamic menu-item" href="/infopath/Lists/TimeInLieuDaysOff/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">TimeInLieuDaysOff</span></span></a></li>
            </ul></li><li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/infopath/_layouts/viewlsts.aspx?BaseType=1"><span class="additional-background"><span class="menu-item-text">Libraries</span></span></a><ul class="dynamic">
                <li class="dynamic"><a class="dynamic menu-item" href="/infopath/TravelRequest/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">TravelRequest</span></span></a></li><li class="dynamic"><a class="dynamic menu-item" href="/infopath/ISAuthorisation/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">ISAuthorisation</span></span></a></li>
            </ul></li>
        </ul></li><li class="static"><a class="static menu-item" href="/TEST1/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 1</span></span></a></li><li class="static"><a class="static menu-item" href="/test2/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 2</span></span></a></li><li class="static"><a class="static menu-item" href="/test3/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 3</span></span></a></li><li class="static"><a class="static menu-item" href="/test4/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Test 4</span></span></a></li>
    </ul>
</div>

Answer 1

将所有按钮放在其自己的<div>

中

在主人div（不是带按钮的人）上，设置align="center"

然后，删除float:left

Answer 2

不会s4-tn需要为“width：100％”，菜单水平为“display：inline”和“margin：0 auto”？这应该将子div放在父div中。

居中CSS顶部导航菜单 - SharePoint子网站

2 个答案: