Question

我是HTML和样式的新手，我面临着在给定空间中拟合内容的问题。

以下是模板提供的内容：

    <div id="header">
        <h1>Webquest</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
            <li><a href="#">Task</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Evaluation</a></li>
            <li><a href="#">Conclusion</a></li>
            <li><a href="#">Credits</a></li>
        </ul>
    </div>

样式：

#header
{
background-image:url(header.png);
background-repeat:no-repeat;
width:921px;
height:72px;
}

在该空间中，网页仅显示Webquest，Home，Introduction，Task，Process和Resources。

所有剩余的元素（评估，结论和学分）都不会显示在空白处。

我该怎么做才能纠正这个问题？

Answer 1

这完全取决于你想要达到的结果

h1
{
 margin:0;
}
#header ul
{
 margin:0;
 padding:0;
 list-style:none;
}
#header ul li
{
 float:left;
}

这个jsfiddle输出是根据你在你的问题中提出的： http://jsfiddle.net/8fjZA/1/

那么问题是什么？

这个jsfiddle输出是根据我的回答，虽然不清楚你到底想要什么：

http://jsfiddle.net/8fjZA/2/

修改

你的标题宽度需要比现在更多...你没有显示完整的代码所以假设请减少你的利润之间的填充，你就完成了....

您使用图片作为标题背景，宽度为921像素，如果您增加菜单，则必须增加此图片

Answer 2

这里有多个选项

删除css

height

使用overflow-y: auto，如果您的内容将呈现滚动条走出指定的边界
增加height属性以容纳您的所有内容

根据我对您的问题的理解，这是答案

顺便说一句，我不确定你的导航栏是否存在问题。屏幕截图很有帮助

Answer 3

The template being used有一个固定宽度菜单，背景图片可容纳5个菜单项，但你需要一个包含8个菜单的菜单。

你能做什么：

使用其他模板。
有一个较短的菜单。删除8个项目中的3个，因此您有5个项目，这些项目符合模板布局而不做任何更改。
减小每个菜单项的宽度。这可能看起来不太好。
增加菜单的宽度（以及可选的整个主题）。

对于选项3和4，您需要为菜单创建一个新的背景图像（替换#header背景图像的 header.png 文件。）

要减小每个菜单项的宽度，请更改li中styles.css元素的宽度：

#header ul li , #header ul li a, #header ul li a:visited{
    display:block;
    float:left;
    margin: 0px;
    text-align:center;
    line-height:72px;
    width:133px;   /* CHANGE THE WIDTH HERE TO A SMALLER VALUE */
    color:#FFFFFF;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
}

要增加整个菜单的宽度，请增加#header元素的宽度：

#header
{
background-image:url(header.png);
background-repeat:no-repeat;
width:921px;    /* CHANGE THE WIDTH HERE TO A BIGGER VALUE */
height:72px;
}

Answer 4

你遇到的问题是你修复了标题的高度而div标题是否隐藏了溢出属性。意味着标题之外的所有内容都将被隐藏。

可能有不同的解决方案最好是保持标题自动的高度，不保持标题中的高度会使其自动。要么。如果您希望通过保留标题的高度使其可见，则添加属性“overflow：visible;”到标题

HTML和样式对齐问题

4 个答案: