Question

我无法将包含图片和导航链接的标题内容集中在一起。我可以将它们居中，但它的左右两边都没有。如果我将宽度设置为100％，它将填充标题div，但图像和链接将转到左侧。我在网上跟着一个例子，但是当我尝试将它与我的代码一起使用时，它无法工作。我错过了什么。

<div id="navigation-row">
    <ul id="navigation">
        <li><a href="#">link 1</a>
        </li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">Logout</font></a></li>
        <li>
        <div class="search">
                <form action="search.php" method="POST">
                    <input name="search" type="text" maxlength="30" class="textfield"
                        value="search" />

                </form>
            </div></li>
    </ul>

        <div class="clearer"></div>
</div>

<body>
<div id="container">
    <div class="header-cont">
        <div class="header">
            <img src="images/header.png"></img>
            <?php   require ("navigation.php"); ?>
        </div>
    </div>

    <div id="content-container1">
        <div id="section-navigation">
        </div>
        <div id="content">
        </div>

        <div id="aside">
        </div>
        <div id="footer">Copyright © Site name, 20XX</div>
    </div>
</div>
</body>
</html>

的CSS

.header-cont {
    width: 100%;
    min-width:966px;
    position: fixed;
    top: 0px;
}

.header {
    height: 122px;
    background: #fff;
    width: 100%;
    margin:0px auto;
}

/* These are used on the header navigation */
.clearer {
    clear: both;
}

#navigation-row {
    background: #aeb5b8 url("images/navigation-bg.gif") repeat-x left top;
    height: 38px;
    border-left: solid 1px #818b8f;
    border-right: solid 1px #818b8f;
    width: 100%;
    margin: 0px auto;
    float : left;
}

ul#navigation {
    display: block;
    float: left;
    list-style: none;
    background: url("images/nav-spacer.gif") repeat-y -1px top;
    height: 38px;
    margin: 0 auto;
    width: 966px;
}

ul#navigation li {
    display: block;
    float: left;
    background: url("images/nav-spacer.gif") repeat-y right top;
    height: 38px;
    padding-right: 2px;
}

ul#navigation li a {
    display: block;
   // float: left;
    line-height: 38px;
    padding: 0px 20px;
    font-family: Verdana;
    font-size: 14px;
    color: #313a3e;
    text-decoration: none;
    letter-spacing: -1px;
}

ul#navigation li a:hover, ul#navigation li a.active {
    background: url("images/nav-bg-hover.gif") repeat-x left top;
}
/* These are used on the header navigation */

感谢。

在全宽div中居中导航链接和图像

0 个答案: