Fatal编程技术网
  • html/
  • HTML div标记显示为内联

HTML div标记显示为内联

html css

HTML div标记显示为内联,html,css,Html,Css,我有一个用div元素制作的导航条站点 出于某种原因，导航栏在其包含的div之外显示 此外，它的行为与inline相同，即它不会扩展到包含div的整个宽度，而是在它包含的最后一个元素的右侧结束。以下任何元素都将立即显示在其右侧的同一行上 HTML: <body> <header> <img src="imgs\coolPic.jpg />" <div id="nav"> <ul&g

我有一个用
div
元素制作的导航条站点

出于某种原因，导航栏在其包含的div之外显示

此外，它的行为与inline相同，即它不会扩展到包含div的整个宽度，而是在它包含的最后一个元素的右侧结束。以下任何元素都将立即显示在其右侧的同一行上

HTML:

<body>
    <header>
        <img src="imgs\coolPic.jpg />"
        <div id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Foobar</a>
                    <ul class="submenu">
                        <li><a href="#">Foo</a></li>
                        <li><a href="#">Bar</a></li>
                    </ul>
                </li>
                <li><a href="#">Lorem Ipsum</a>
                    <ul class="submenu">
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                    </ul>
                </li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>
    ...more body stuff...
</body>

header {
background-color: #cccccc;
}
#nav {
background-color: #cccccc;
border-bottom: 2px solid #000000;
position: absolute;
}
#nav ul li {
float:left;
display:block;
}
#nav ul li a:link,
#nav ul li a:visited
{
display:block;
padding: 8px 12px;
background-color: #cccccc;
text-decoration: none;
color: #111111;
}
#nav ul li a:hover {
background-color: #111111;
color: #cccccc;
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav ul li ul li a:hover{
color:#3B5998;
}
.submenu {
position: absolute;
width: 160px;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}
…如果您想知道，下面是使导航栏正常工作的jquery：

function nav(){
    $('div#nav ul li').mouseover(function() {
    $(this).find('ul:first').show();
    });

    $('div#nav ul li').mouseleave(function() {
    $('div#nav ul li ul').hide();
    });

    $('div#nav ul li ul').mouseleave(function() {
    $('div#nav ul li ul').hide();;
    });
    };

    $(document).ready(function() {
    nav();
    });
（信用记录：我找到了jquery。）

我试着使用
header
和
div#nav
元素的CSS
position
属性，但没有多大帮助

问题出现在Firefox、Chrome和IE中

有什么好主意吗？

你的图像标签错了

将
更改为


看看这个
从您的
#nav
中删除
位置：绝对
，然后添加
溢出：隐藏
。如果我正确理解了您的问题，它应该会解决它


您是否在使用doctype并验证HTML？