内联 UL 尺寸/定位存在问题

Question

好的，所以我使用 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 次。您能提供的任何帮助将不胜感激

Answer 1

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

谢谢大家！