1

解决了 - 这是一个集体的努力。非常感谢你们，我在这里的第一次发帖体验非常棒，你们都给了我要学习的东西：）

我正在尝试使用 html5/css(3) 创建一个网站。我希望有一个导航栏位于标题的远端，并与 h1 元素位于同一行，同时共享 h1 背景。（如果可能的话）我将发布我正在使用的代码，以及一个屏幕截图，显示它的外观与我想要的外观。 注意我已经搞砸了几个小时，所以我的代码很漂亮......现在到处都是。对不起。

图片链接：http: //i36.photobucket.com/albums/e50/Fallon_Vii/screencap.png

<body id="wrapper">
<div id="header">
<img src="images/logo2.png">
<h2>Broadcast Services</h2>

<ul id="nav">
<li class="border"> <a href="index.hmtl">Home</a></li>
<li class="border"> <a href="about.hmtl">PAGE 2</a></li>
<li class="border"> <a href="master.hmtl">PAGE 3</a></li>
<li class="border"> <a href="advertise.hmtl">PAGE 4</a></li>
<li class="border"> <a href="entertainment.hmtl">PAGE 5</a></li>
<li> <a href="contact.hmtl">Contact Us</a></li>
</ul>
</div> 

#header {
width: 100%;
border-top: 1.5px solid black;
border-bottom: 1.5px solid black;
margin-bottom: 4%;
padding: .75%;
}

#header img {
width: 30%;
display: inline;
}

h2 {
color: #4F2F8F;
font-size: 125%;
font-weight: bold;
background-image: url(images/transpblack10.png);
text-shadow: 1px 1px 1px #000000;
line-height: 85%;
}

#nav  {
font-size: 110%;
float: right;
}

#nav ul li {
display: inline;
float: left;
list-style-type: none;
}

#nav ul li a {
display: inline-block;
text-decoration: none;
}
4

2 回答 2

0

好吧，首先你的<ul>'s 没有正确的语法......它应该看起来像这样：

ul#nav li {
display: inline;
float: left;
list-style-type: none;
}

ul#nav li a {
display: inline-block;
text-decoration: none;
}

我相信这就是您要实现的目标：

http://jsfiddle.net/NQVLy/5/

于 2013-04-15T04:52:29.113 回答
-1

嗨，艾莉森，请根据您的要求检查下面提到的代码，它的工作正常......

实际上，您犯了一些小错误，这就是为什么它变得如此混乱的原因，现在我已经对错误及其工作进行了排序，因此您可以检查....

现场演示

HTML

<body id="wrapper">
<div id="header">

 <div class="bg">
<img src="images/logo2.png">
<h2>Broadcast Services</h2>
<ul id="nav">
<li class="border"> <a href="index.hmtl">Home</a></li>
<li class="border"> <a href="about.hmtl">PAGE 2</a></li>
<li class="border"> <a href="master.hmtl">PAGE 3</a></li>
<li class="border"> <a href="advertise.hmtl">PAGE 4</a></li>
<li class="border"> <a href="entertainment.hmtl">PAGE 5</a></li>
<li> <a href="contact.hmtl">Contact Us</a></li>
</ul>
</div>
</div>

CSS

#header {
width: 100%;
border-top: 1.5px solid black;
border-bottom: 1.5px solid black;
margin-bottom: 4%;
padding: .75%;
}

#header img {
width: 30%;
display: inline;
}
.bg {
    background:grey;
}
h2 {
color: #4F2F8F;
font-size: 125%;
font-weight: bold;
text-shadow: 1px 1px 1px #000000;
display:inline-block;
    margin:0;
    padding:0;
}

#nav  {
font-size: 110%;
float: right;
    margin:0;
    padding:0;
}

#nav li {
display: inline;
float: left;
list-style-type: none;
}

#nav li a {
display: inline-block;
text-decoration: none;
    color:#fff;
}
于 2013-04-15T05:12:33.903 回答