Html 我能'；t在其容器内正确对齐我的导航菜单_Html_Css

Html 我能'；t在其容器内正确对齐我的导航菜单

html css

Html 我能'；t在其容器内正确对齐我的导航菜单,html,css,Html,Css,我附上了一张照片，这样你可以看到我收到了什么样的问题。我希望导航菜单与导航容器对齐，以便它们显示为相同的元素。图中显示了导航菜单“电子邮件”的最后一个元素，然后它所在的容器只是一个黄色的条带（如下面的代码所示）我曾尝试在导航容器上使用负边距，但到目前为止还没有解决方案 css示例 #标志{ 背景色：黑色；宽度：100%；颜色：rgb（255200,0）； } #标志img{ 填充：10px； } 身体{ 字体系列：Arial、Helvetica、Verdana；保证金：0； } #内

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

我曾尝试在导航容器上使用负边距，但到目前为止还没有解决方案


css示例
#标志{
背景色：黑色；
宽度：100%；
颜色：rgb（255200,0）；
}
#标志img{
填充：10px；
}
身体{
字体系列：Arial、Helvetica、Verdana；
保证金：0；
}
#内容{
边框：2件纯黑；
边界半径：15px；
盒影：6px 6px 4px 4px#000；
宽度：90%；
最小高度：650px；
利润率：0.5%；
边缘顶部：15px；
填充：15px；
}
#导航菜单{
宽度：760px；
高度：30px；
背景色：rgb（255200,0）；
边框：1px#000实心；
字体大小：粗体；
左边距：-2px；
}
#导航菜单{
保证金：-1px0；
填充：0；
线高：32px；
}
#navMenu li{
保证金：0；
填充：0；
列表样式：无；
位置：相对位置；
背景色：rgb（255200,0）；
浮动：左；
边框：1px#000实心；
}
#Navul li a菜单{
文本对齐：居中；
文字装饰：无；
高度：30px；
宽度：150px；
显示：块；
颜色：#000；
}
#导航菜单{
位置：绝对位置；
可见性：隐藏；
顶部：31px；
左边距：-2px；
}
#导航菜单ul li：悬停ul{
能见度：可见；
}
#导航菜单a：悬停{
背景色：#000；
颜色：rgb（255200,0）；
}
.左上角{
背景：黑色；
}
.右部分{
背景：黄色；
浮动：对；
空白：nowrap；
显示：内联；
文本溢出：省略号；
溢出：隐藏；
}
#导航集装箱{
背景色：rgb（255200,0）；
宽度：100%
页边顶部：-3x；
填充：0；
边框：1px实心；
高度：31px；
清除：左；
}














这只是一些虚拟文本

我做了一点清理。由于我没有你的标志图像，我删除了代码的这一部分，我想你会设法添加自己

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

<!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>


css示例
身体{
字体系列：Arial、Helvetica、Verdana；
保证金：0；
填充：0；
}
#内容{
边框：2件纯黑；
边界半径：15px；
盒影：6px 6px 4px 4px#000；
宽度：90%；
最小高度：650px；
利润率：0.5%；
边缘顶部：15px；
填充：15px；
}
导航{
宽度：100%；
高度：30px；
背景色：rgb（255200,0）；
边框底部：1px实心#000；
}
导航ul{
填充：0；
保证金：0；
溢出：隐藏；
}
导航>ul{
最小宽度：755px；
}
李国荣{
浮动：左；
保证金：0；
填充：0；
列表样式：无；
背景色：rgb（255200,0）；
右边框：1px实心#000；
}
海军ulli a{
文本对齐：居中；
文字装饰：无；
宽度：150px；
高度：25px；
垫面：5px；
显示：块；
颜色：#000；
}
nav ul li ul{
位置：绝对位置；
可见性：隐藏；
顶部：31px；
边框底部：1px实心#000；
左边框：1px实心#000；
左边距：-1px；
}
导航ulli：悬停ul{
能见度：可见；
}
李国荣{
浮动：无；
}
导航a：悬停{
背景色：#000；
颜色：rgb（255200,0）；
}














这只是一些虚拟文本

您的

li

元素有边框。边框将使其内容区域小于容器的内容区域。也许你正在寻找的是将其设置为左/右边框，或者甚至是右边框，这样在

li

s之间就不会有两个边框了？这很有帮助，但是底部看起来是：-（

#navcontainer{height:30px；}

此处的子列表显示为水平而不是垂直。这些修复可以工作，但当我调整浏览器的大小时，导航菜单不会保持不变。您认为如何？是菜单项在缩小浏览器窗口时跳转到下一行吗？这是我最初在固定宽度导航菜单后面使用容器的原因这样，当用户调整浏览器的大小时，导航菜单将保持不变。我通过向ul添加

最小宽度：755px

（5倍151px，即菜单项的宽度。150px加上1px边框）来修复此问题。

#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;

}

<!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>