Question

我使用以下CSS在WordPress中创建了一个精灵图像菜单：

/* 04 Microsites Navigation */
.micrositescontainer {
    background: url('img/microsites_main_bkg.jpg');
}

.micrositestopnav ul {
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding-left: 20%;
}

.micrositestopnav .horizontal-menu ul li {
    border-color: #FFFFFF;
    border-left: 0px solid #FFFFFF;
    float: left;
    padding: 0px 0 0 0;
}

/* Microsites Menu Items Start Here]*/
.micrositestopnav .menu-item-8449 a {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8449.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8449.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8449 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8449 > a, .micrositestopnav li.current_page_item.menu-item-8449 > a, .micrositestopnav li.current_page_ancestor.menu-item-8449 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 -125px;
}

.micrositestopnav .menu-item-8453 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px 0px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8453.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8453.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8453 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8453 > a, .micrositestopnav li.current_page_item.menu-item-8453 > a, .micrositestopnav li.current_page_ancestor.menu-item-8453 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px -125px;
}

.micrositestopnav .menu-item-8456 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8456.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8456.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8456 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8450 > a, .micrositestopnav li.current_page_item.menu-item-8456 > a, .micrositestopnav li.current_page_ancestor.menu-item-8456 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px -125px;
}

.micrositestopnav .menu-item-8481 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8481.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8481.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8481 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8481 > a, .micrositestopnav li.current_page_item.menu-item-8481 > a, .micrositestopnav li.current_page_ancestor.menu-item-8481 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px -125px;
}
/* Microsites Menu Items End Here]*/
/* 04 Microsites Navigation End */

菜单工作正常，但有一天在Chrome Linux 33.0.1750.152检查网站时，我注意到精灵图像的水平布局没有排列在同一区域。我相信使用以下代码（padding-left：20％）会导致此问题：

.micrositestopnav ul {
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding-left: 20% ;
}

我认为通过应用上面的快速解决方案很难实现我想要精灵菜单中心的愿望。我想知道一个更有经验的编码员如何将这个区域集中在一起。

您可以在http://betabooks.matthewflint.com看到正在使用的菜单。目前我无法上传图片，因为我刚加入此网站，但请注意精灵菜单位于测试版网站的上方标题区域。右边的第四张图片被强制缩小到Chrome中的下一行。对我来说，它在Firefox 28.0中显示正常。

感谢您的时间和考虑。

Answer 1

这可能是可能的解决方案

删除.horizontal-menu的float属性并更新各个CSS中的属性

.horizontal-menu {
    text-align:center
}

.micrositestopnav ul{
    margin:0 auto;
}

现在我可以用上面的方法看到4个李，即使你增加或减少李的数量它仍会对齐中心

请检查其他浏览器以及希望这会有所帮助。

中心ul精灵导航

1 个答案: