Question

解决了 - 这是一项小组努力。非常感谢你，我在这里的第一次发帖经历非常精彩，你们都给了我要学习的东西：）

我正在尝试使用html5 / css（3）制作网站。我希望导航栏位于标题的远端，并且在共享h1背景时与h1元素位于同一行。（如果可能的话）我将发布我正在使用的代码，以及一个屏幕截图，显示它看起来像我希望它看起来像什么。 note 我一直在搞乱这几个小时，所以我的代码很漂亮......现在到处都是。遗憾。

链接到图片：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;
}

Answer 1

首先，你没有<ul>的正确语法......它应该是这样的：

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/

Answer 2

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

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

<强> LIVE DEMO

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

不能在h1元素旁边显示导航

2 个答案: