Html DIV中的元素开始新行_Html_Css

Html DIV中的元素开始新行

html css

Html DIV中的元素开始新行,html,css,Html,Css,我需要你在HTML/CSS问题上的帮助：我正在创建一个非常简单的网页，其中有一个导航栏，由一个包含五个“li”的“ul”组成。“ul”宽900px，在一个“div”内。每个“li”的宽度为900/5=180px。尽管如此，这些元素创建了一条新的线这就是我所期望的（或多或少）：这就是我得到的：这是HTML： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd

我需要你在HTML/CSS问题上的帮助：我正在创建一个非常简单的网页，其中有一个导航栏，由一个包含五个“li”的“ul”组成。“ul”宽900px，在一个“div”内。每个“li”的宽度为900/5=180px。尽管如此，这些元素创建了一条新的线

这就是我所期望的（或多或少）：

这就是我得到的：

这是HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
</head>

<body>
<div id="container">
    <div id="fascia">
        <h1>My First Website</h1>
    </div>
    <hr class="menu">
    <div id="nav">
        <ul>
            <li><a href="img/a.jpg">About</a></li>
            <li><a href="img/b.jpg">Photo</a></li>
            <li><a href="img/c.jpg">News</a></li>
            <li><a href="img/d.jpg">Video</a></li>
            <li><a href="img/e.jpg">Contacts</a></li>
        </ul>
    </div>
    <hr class="menu">
</div>

</body>
</html>

@charset "utf-8";
/* CSS Document */


body 
{
    background-color:#363636;
    background-image:url(../img/noise.png);
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container
{
    position:relative;
    width:1000px;
    height:700px;
    margin:0 auto;
}

#fascia
{
    width:950px;
    padding:25px;
    font-size:4em;
    position:relative;

}

html
{
    height:100%;
}

h1,h2,h3,h4,h5,h6,p{
    color:#FFF;
    font-family:Arial,Helvetica,sans-serif;
    text-align:center;
}

hr.menu
{
    margin:0;
}

#nav
{
    width:100%;
    position:relative;
}

#nav ul 
{
    width:900px;
    margin:0 auto;
}

#nav ul li
{
    display:inline-block;
}


#nav ul li a
{
    display:block;
    width:180px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    padding:5px 0;
}


#nav ul li a:hover
{
    background-color:#C09;
}

这是我的真实CSS文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
</head>

<body>
<div id="container">
    <div id="fascia">
        <h1>My First Website</h1>
    </div>
    <hr class="menu">
    <div id="nav">
        <ul>
            <li><a href="img/a.jpg">About</a></li>
            <li><a href="img/b.jpg">Photo</a></li>
            <li><a href="img/c.jpg">News</a></li>
            <li><a href="img/d.jpg">Video</a></li>
            <li><a href="img/e.jpg">Contacts</a></li>
        </ul>
    </div>
    <hr class="menu">
</div>

</body>
</html>

@charset "utf-8";
/* CSS Document */


body 
{
    background-color:#363636;
    background-image:url(../img/noise.png);
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container
{
    position:relative;
    width:1000px;
    height:700px;
    margin:0 auto;
}

#fascia
{
    width:950px;
    padding:25px;
    font-size:4em;
    position:relative;

}

html
{
    height:100%;
}

h1,h2,h3,h4,h5,h6,p{
    color:#FFF;
    font-family:Arial,Helvetica,sans-serif;
    text-align:center;
}

hr.menu
{
    margin:0;
}

#nav
{
    width:100%;
    position:relative;
}

#nav ul 
{
    width:900px;
    margin:0 auto;
}

#nav ul li
{
    display:inline-block;
}


#nav ul li a
{
    display:block;
    width:180px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    padding:5px 0;
}


#nav ul li a:hover
{
    background-color:#C09;
}

对不起，这封信太长了，谢谢你的回答

编辑：这里是使用

float:left

而不是

display:inline块。

#nav ul li
{
    display:inline-block;   <-- here
}

#导航ul li
{
显示：内联块；内联放置的元素对HTML中的结构很敏感-如果注释掉
之间的空白或手动删除空白，菜单将按预期排列
另一种选择是将上的字体大小设置为0，然后为重新声明所需的字体大小。这是一篇内容丰富的文章，讨论了这一流行问题以及解决此问题的其他方法。
我会为上的每个导航项目设置所需的宽度，然后设置
宽度：100%；
。在使用导航列表上的显示内联块时，不要忘记空白。HTML中的任何额外空格都可以在内联块元素周围增加一些额外的像素间距。
而不是像其他建议的那样使用浮点数（这有时很烦人，因为它们需要在事后清除）您还可以删除菜单项之间的空白，如下所示：
<div id="nav">
    <ul>
        <li><a href="img/a.jpg">About</a></li><li><a href="img/b.jpg">Photo</a></li><li><a href="img/c.jpg">News</a></li><li><a href="img/d.jpg">Video</a></li><li><a href="img/e.jpg">Contacts</a></li>
    </ul>
</div>






jsiddle:
此外，您可能需要将溢出：自动；
添加到父级ul
，这样它就不会崩溃。谢谢您，使用“float:left”和“overflow:auto”的解决方案非常有效！另外一个问题：您能给我链接一个网站，解释一下如果我不使用“overflow:auto”为什么会崩溃吗溢出：自动是一种清除浮动的技术。是的，内联块可能是一种痛苦。另请参见：完美，它工作得很好，您编写的链接非常详细地解释了这个问题。谢谢！对不起，我不知道我不知道那个网站！下面是