0

好的，所以使用 wordpress 为我朋友的一个教堂开发一个网站，但我遇到了障碍。我通常不喜欢导航栏，但我决定尝试一下......所以这就是我正在做的事情：

导航栏背景是一个 1x64 像素的重复-x。nav bar 实际上是一个 UL 内联显示。我想让每个<li>标签的背景都是一个静态的设置图像，它们彼此相邻，以获得动态的震撼。问题：我无法将背景图像强制为 100%。它仅与文本一样宽。图像尺寸（用 Photoshop 制作）为 167x64 像素。我无法将<nav>标签内的链接水平居中，也无法获得应有<li>的完整大小的背景。我已经尝试手动将每个级别中所有内容的高度设置为 64px 以及verticle-align:middle;用于我想要的定位，这真的让我的头很乱@.@

网站位于http://parnell.co/hurricane-church-of-god

页面来源：

<div class="nav-wrapper">

            <!-- Nav -->

                <nav>
                    <ul id="menu-nav-bar" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-18"><a href="http://parnell.co/hurricane-church-of-god/">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://parnell.co/hurricane-church-of-god/sample-page">Sample Page</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://parnell.co/hurricane-church-of-god/blog">Blog</a></li>
</ul>                </nav>

            <!-- /Nav -->

            <br class="clear">

        </div>
        <!-- /nav-wrapper -->

CSS 来源：

/******************************************************
     *                    Navigation                      *
     ******************************************************/

    div.nav-wrapper {
        margin-top:-16px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background:url(img/nav-bg.png) repeat-x;
        height:64px;
        vertical-align:middle;
    }

    div.nav-wrappter ul,
    nav ul li {
        float:left;
        height:64px;
        vertical-align:middle;
    }

    nav ul#menu-nav-bar li {
        display: inline;
        list-style-type: none;
        vertical-align:middle;
        background-image:url(img/nav-button.png);
        background-size:100%;
        background-repeat:no-repeat;
        height:64px;
    }

    nav ul#menu-nav-bar li a {
        text-decoration:none;
        height:64px;
        vertical-align:middle;
    }

请忍受我在代码上的草率，我整天都在努力解决它，并且或多或少地从头开始在那个部分上像 8 次。您可以提供的任何帮助将不胜感激

4

1 回答 1

0

好的，感谢@ahillman3，我能够理清思路并弄清楚。很好的链接顺便说一句。以及错字......这是最大的问题，因为在修复之前没有任何东西可以正常工作。指定<li>标签的宽度会强制按钮正确运行。至于居中文本，css 属性display:block;在应用于时nav ul#menu-nav-bar li a {}是使<a>标签（线条对象）表现得像一个div或表格（一个块对象）的关键。之后，只需添加一些边距即可使文本居中在框中。

多谢你们！

于 2013-01-23T12:05:46.557 回答