将块菜单“
  • ”元素置于“
    ”中居中
  • 发布于 2024-09-26 04:27:40 字数 2099 浏览 1 评论 0原文

    这应该是一件简单的事情 - 我确信我只是错过了一些简单的事情。

    我有一个标题,想要一个嵌套的、居中的水平菜单。

    #header {
        background:url(images/headers/header.gif);
        margin: 0 auto;
        height: 207px;
        width: 100%;
    }
    
    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
        background: transparent;
        display: block;
        text-align: center;
        float: left;
        margin: 150px auto 0;
        width: 940px;
    }
    #access .menu-header,
    div.menu {
        font-size: 13px;
        margin-left: 120px;
        width: 766px;
    }
    #access .menu-header ul,
    div.menu ul {
        list-style: none;
        margin: 0 auto;
    }
    #access .menu-header li,
    div.menu li {
        background-color: #444;
        margin: 0 auto;
        float: left;
        text-align: center;
        width: 110px;
        position: relative;
    }
    #access a {
        color: #aaa;
        display: block;
        line-height: 38px;
        padding: 0 10px;
        text-decoration: none;
    }
    #access ul ul {
        box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
        display: none;
        position: absolute;
        top: 38px;
        left: 0;
        float: left;
        width: 180px;
        z-index: 99999;
    }
    #access ul ul li {
        min-width: 180px;
    }
    #access ul ul ul {
        left: 100%;
        top: 0;
    }
    #access ul ul a {
        background: #333;
        line-height: 1em;
        padding: 10px;
        width: 160px;
        height: auto;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
        background: #444;
        color: #fff;
    }
    #access ul li:hover > ul {
        display: block;
    }
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
        color: #fff;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
        color: #fff;
    }
    

    站点: http://74.86.183.200/~riaharb/stage/

    提前致谢!

    This should be an easy one - I'm just missing something simple, I'm sure.

    I have a header and want a nested, centered horizontal menu.

    #header {
        background:url(images/headers/header.gif);
        margin: 0 auto;
        height: 207px;
        width: 100%;
    }
    
    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
        background: transparent;
        display: block;
        text-align: center;
        float: left;
        margin: 150px auto 0;
        width: 940px;
    }
    #access .menu-header,
    div.menu {
        font-size: 13px;
        margin-left: 120px;
        width: 766px;
    }
    #access .menu-header ul,
    div.menu ul {
        list-style: none;
        margin: 0 auto;
    }
    #access .menu-header li,
    div.menu li {
        background-color: #444;
        margin: 0 auto;
        float: left;
        text-align: center;
        width: 110px;
        position: relative;
    }
    #access a {
        color: #aaa;
        display: block;
        line-height: 38px;
        padding: 0 10px;
        text-decoration: none;
    }
    #access ul ul {
        box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
        display: none;
        position: absolute;
        top: 38px;
        left: 0;
        float: left;
        width: 180px;
        z-index: 99999;
    }
    #access ul ul li {
        min-width: 180px;
    }
    #access ul ul ul {
        left: 100%;
        top: 0;
    }
    #access ul ul a {
        background: #333;
        line-height: 1em;
        padding: 10px;
        width: 160px;
        height: auto;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
        background: #444;
        color: #fff;
    }
    #access ul li:hover > ul {
        display: block;
    }
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
        color: #fff;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
        color: #fff;
    }
    

    site: http://74.86.183.200/~riaharb/stage/

    Thanks in advance!

    如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(1

    〃温暖了心ぐ 2024-10-03 04:27:40

    这并不复杂,这应该可行:

    #parent_ul {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    }
    
    #parent_ul > li {
    display: inline; /* or inline-block */
    }
    

    That's not hugely tricky, this should work:

    #parent_ul {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    }
    
    #parent_ul > li {
    display: inline; /* or inline-block */
    }
    
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文