Question

好的，所以使用wordpress为我朋友的一个教堂开发一个网站，我遇到了麻烦。我通常不会对导航栏感到满意，但我决定采取行动......所以这就是我正在做的事情：

导航栏背景是1x64像素的重复-x。导航栏实际上是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;
    }

请忍受我在代码中的邋iness，我一直试图整天围绕它，并且或多或少从头开始，就像8次一样。非常感谢您提供的任何帮助

Answer 1

好的，感谢@ ahillman3，我能够直截了当地理解它。很棒的链接顺便说一句。还有错字......这是关于最大的问题，因为在修复之前没有任何事情可以正常工作。指定<li>标记的宽度会强制按钮正常运行。至于对文本进行居中，应用于display:block;时的css属性nav ul#menu-nav-bar li a {}是使<a>标记（线对象）的行为与div或表格相似的关键（块对象）。之后，就像添加一些空白来获得文本中心一样简单。

谢谢你们！

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

1 个答案: