5

我在 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>

这是我的第一个 CSS 文件（一个重置的标准 CSS 文件）：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

这是我真正的 CSS 文件：

@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;
}

很抱歉这条消息的长度，感谢您的任何回答！

编辑：这里是jsFiddle

4

4 回答 4

8

内联的元素对它们在 HTML 中的结构很敏感 - 如果您注释掉<li>' 之间的空白或手动删除空白，菜单将按预期排列。

另一种选择是将 设置font-size为0，然后为's<ul>重新声明所需的字体大小。这是一篇内容丰富的文章，讨论了这个热门问题以及解决它的其他方法。<li>

于 2013-03-12T17:57:33.040 回答
6

使用float:left代替display:inline-block.

#nav ul li
{
    display:inline-block;   <-- here
}
于 2013-03-12T17:57:24.787 回答
2

我会为每个导航项目<li>设置你想要的宽度，然后将你的设置<a>为width:100%;. 并且在导航列表上使用显示内联块时不要忘记空格。HTML 中的任何额外空格都可以在行内块元素周围添加一些额外的间距像素。

于 2013-03-12T18:03:11.513 回答
2

而不是像其他人建议的那样使用浮动（有时很烦人，因为它们需要事后清除），您还可以删除菜单项之间的空格，如下所示：

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

JSFiddle：http: //jsfiddle.net/QNb2j/1/

于 2013-03-12T18:07:26.910 回答