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>...次のようになります。

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 に答える