1

在我的 CSS 中，我创建了一个 menubar<div>和一个 header <div>。我的目的是让菜单行与标题背景图像的底部齐平，因此我将菜单嵌套在标题内。唉，它不起作用，我不知道为什么。

我创建了一个fiddle，但我不知道如何上传相关的图像文件，所以我附上了标题占位符 image 标题背景占位符。我还上传了一个 Wireframe 线框，展示了我正在努力实现的目标。

如果您无法查看小提琴，这是我的 HTML 和 CSS：

HTML：

<!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ------------------------------------------------------------------------>
<head>
    <title>Test</title>
    <LINK rel="stylesheet" href="t2.css" type="text/css">
</head>
<!-- ------------------------------------------------------------------------>

<body>
    <div id="header" >
        <div id="menubar">
            <a href="#">home</a>  |  <a href="#">about</a>  |  <a href="#">contact</a>
        </div>
    </div>
</body>
</html>

CSS：

body     {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 12px;
    }

h1    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 2em;
    }

h2    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1.5em;
    margin-left: 5%;
    }

h3    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1em;
    margin-left: 20%;
    }

p    {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif
    font-size: 12px;
    padding: 0px 0px 0px 600px;
    margin: 0px:
    float: bottom;
    }

a    {
    color: #000064;
    text-decoration: none;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    }

a.visited {
    color: #640064;
    weight: bold;
    text-decoration: none;
    }

#header {
    height: 120px;
    background-color: #ffffff;
    background-image: url(headerblock.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    float: bottom;
    }

#menubar {
    border-width: 1px 0px 1px 0px;
    border-color: #000064;
    border-style: solid;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    line-height: 16px;
    float: bottom;
    padding: 0px 0px 0px 600px;
    margin: 0px 0px 0px 0px;
    }

#menubar a {
        text-decoration: none;
        color: #000064;
        float: bottom;
        }

#menubar a.visited {
    text-decoration: bold;
    color: #000000;
    float: bottom;
        }

有人有想法么？

4

3 回答 3

2

将图像放在单独的 div 中，全部在标题中，如下所示：

<div id="header">
    <div id="banner"></div><!--
 --><div id="menubar"></div>
</div>

然后使用display: inline-block;on#banner和#menubar。
注意 HTML 注释 after#banner和 before #menubar。就是去掉这些元素之间的空白，如果你不关心空白，你可以把它去掉。查看此内容以获取更多信息：与内联块元素之间的空间作斗争。

检查这个小提琴。

顺便说一句，您应该使用<ul>and<li>进行导航。
并在分隔符上使用边框，而不是|. 那是为了演示，演示应该用css而不是html来处理。

于 2013-01-03T19:59:19.610 回答
0

你#menubar有一个 600px 的填充，将 div 推出。也Float不能是Bottom，要么是Left要么Right。

为了使它完美地放置position:relative在标题 div 和position:absolute; bottom:0px; left:0px;子 div 中

于 2013-01-03T18:23:21.167 回答
0

参数float接受leftor 。right没有这样的事情float: bottom。

但是如果你添加position: relative到标题 div。您可以使用position: absolute; left: 0; bottom: 0;

更新

您可能必须为菜单栏指定宽度，以防止文本向下换行。

于 2013-01-03T18:23:22.653 回答