Question

我附上了一张照片，这样你就可以看到我收到了什么样的问题。我希望导航菜单与导航容器对齐，以便它们显示为相同的元素。图片显示导航菜单“E-MAIL”的最后一个元素，然后它所在的容器只是一个黄色条带（如下面的代码所示）。

我尝试在导航容器上使用负边距但尚未解决方案。

web graphic http://jaylefler.com/webgraphic.png

 <!DOCTYPE html>
    <html>
    <head>
        <title>css example</title>

    <style type="text/css">


    #logo {
        background-color: black;
        width: 100%;
        color: rgb(255,200,0);
    }

    #logo img {
        padding: 10px;
    }

    body {
        font-family: Arial, Helvetica, Verdana;
        margin: 0;
    }

    #contents {
        border: 2px solid black;
        border-radius: 15px;
        box-shadow: 6px 6px 4px 4px #000;
        width: 90%;
        min-height: 650px;
        margin: 0 5%;
        margin-top: 15px;
        padding: 15px;
    }

    #navMenu {
        width: 760px;
        height: 30px;
        background-color:rgb(255,200,0);
        border:1px #000 solid;
        font-weight:bold;
        margin-left: -2px;
    }

    #navMenu ul{
        margin:-1px 0 0 0;
        padding:0;
        line-height:32px;
    }

    #navMenu li{
        margin:0;
        padding:0;
        list-style:none;
        position:relative;
        background-color:rgb(255,200,0);
        float:left;
        border:1px #000 solid;
    }

    #navMenu ul li a{
        text-align:center;
        text-decoration:none;
        height:30px;
        width:150px;
        display:block;
        color:#000;
    }

    #navMenu ul ul{
        position:absolute;
        visibility:hidden;
        top: 31px;
        margin-left: -2px;  
    }

    #navMenu ul li:hover ul{
        visibility: visible;
    }

    #navMenu a:hover {
        background-color:#000;
        color:rgb(255,200,0);
    }

    .left_part {
        background:black;
    }

    .right_part {
       background:yellow;   
       float:right;
       white-space:nowrap;
       display:inline;
       text-overflow:ellipsis;
       overflow:hidden;
    }

    #navContainer {
        background-color:rgb(255,200,0);
        width:100%
        margin-top:-3x;
        padding:0;
        border:1px solid;
        height:31px;
        clear:left;

    }

    </style>

    </head>

    <body>

    <div id="logo">

        <div class="left_part">
            <img src="demo.gif">
        </div>

        <div class="right_part">

        </div>

    </div>


    <div id="navContainer">
        <div id="navMenu">
            <nav>
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">PROFILE</a></li>
                    <li><a href="#">MANAGE SUB</a>
                    <ul>
                        <li><a href="#">VIEW TITLES</a></li>
                        <li><a href="#">ADD TITLE</a></li>
                        <li><a href="#">MODIFY TITLE</a></li>
                        <li><a href="#">REMOVE TITLE</a></li>
                    </ul>
                    </li>
                    <li><a href="#">NEW RELEASES</a></li>
                    <li><a href="#">E-MAIL</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <div id="contents">

        <p>This is just some dummy text. </p>

    </div>

    </body>
    </html>

Answer 1

#navmenu {
    width: 760px;
    height: 30px;
    background-color: #FFC800;
    border: 1px black solid;
    border-top: 0; /* REMOVE TOP BORDER */
    margin-left: -2px;
}
#navContainer {
    background-color:rgb(255,200,0);
    width:100%
    height: 30px; /* MATCH HEIGHT */
    margin-top:-3x;
    padding:0;
    border:1px solid;
    height:31px;
    clear:left;

}

Answer 2

我做了一点清理工作。由于我没有你的徽标图片我删除了那部分代码，我想你会设法自己添加。

以下是修复问题的简化代码：

<!DOCTYPE html>
<html>
<head>
    <title>css example</title>

<style type="text/css">

body {
    font-family: Arial, Helvetica, Verdana;
    margin: 0;
    padding: 0;
}

#contents {
    border: 2px solid black;
    border-radius: 15px;
    box-shadow: 6px 6px 4px 4px #000;
    width: 90%;
    min-height: 650px;
    margin: 0 5%;
    margin-top: 15px;
    padding: 15px;
}

nav {
    width: 100%;
    height: 30px;
    background-color:rgb(255,200,0);
    border-bottom:1px solid #000;
}

nav ul{
    padding:0;
    margin: 0;
    overflow: hidden;
}

nav > ul{
    min-width: 755px;
}

nav ul li{
    float: left;
    margin:0;
    padding:0;
    list-style:none;
    background-color:rgb(255,200,0);
    border-right:1px solid #000;
}

nav ul li a{
    text-align:center;
    text-decoration:none;
    width:150px;
    height: 25px;
    padding-top: 5px;
    display:block;
    color:#000;
}

nav ul li ul{
    position:absolute;
    visibility:hidden;
    top: 31px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    margin-left: -1px;  
}

nav ul li:hover ul{
    visibility: visible;
}
nav ul li ul li {
    float: none;
}

nav a:hover {
    background-color:#000;
    color:rgb(255,200,0);
}


</style>

</head>

<body>
<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PROFILE</a></li>
        <li><a href="#">MANAGE SUB</a>
        <ul>
            <li><a href="#">VIEW TITLES</a></li>
            <li><a href="#">ADD TITLE</a></li>
            <li><a href="#">MODIFY TITLE</a></li>
            <li><a href="#">REMOVE TITLE</a></li>
        </ul>
        </li>
        <li><a href="#">NEW RELEASES</a></li>
        <li><a href="#">E-MAIL</a></li>
    </ul>
</nav>

<div id="contents">

    <p>This is just some dummy text. </p>

</div>

</body>
</html>

我无法在其容器内正确对齐导航菜单

2 个答案: