0

さて、ここに私が取り組んでいるページへのリンクがあります：

http://students.thenet.ca/jlandon/

ご覧のとおり、リストは水平ではなく垂直に表示されています。

CSS:

li              {   display:inline;
                list-style-type:none;
            }
#nav            {   background-color:#c6c7c3;
                height:50px;
                margin-top:120px;
                z-index:2;
            }

HTML

<div id="nav">
<ul>
<li><a href="index.php"><h2>Home</h2></a></li> <li><a href="about.php"><h2>About</h2></a></li> <li><a href="school.php"><h2>School</h2></a></li> <li><a href="workshop"><h2>Workshop</h2></a></li> <li><a href="contact.php"><h2>Contact</h2></a></li>
</ul>
</div>

さて、それがうまくいかなかった理由がわかりました（H1-6はブロックです）ので、ナビゲーションをどのように見せたいかの詳細を次に示します（助けてください）： サイトデザイン http://students.thenet.ca/jlandon /images/sitedesign.png

4

4 に答える 4

3

なぜナビゲーション要素に H2 を使用しているのですか?

インラインでも表示するように変更するか、インライン要素を使用してください。

于 2013-01-09T20:21:10.600 に答える
3

h2 はデフォルトでブロック要素です。これが行を分割しています。

h2s で display: inline を設定するか (おそらく良いアイデアではありません)、h2s を別のものに置き換える (a タグを必要なサイズやフォントなどにスタイリングするなど) ことで修正できます。

于 2013-01-09T20:22:07.443 に答える
1

私はfloat: leftこれを修正すると思います：

li 
{   
  display:inline;
  float: left;
  list-style-type:none;
}
于 2013-01-09T20:23:59.257 に答える
0

ナビゲーションで h2 のようなブロック要素を使用する代わりに、セマンティック クラスを使用することを検討する必要があります。h2 要素を使用して、特定のサイズの太字フォントが必要な場合は、次のことを考慮する必要があります。

.nav-text, #nav li a {
  font-size: 1.25em;
  font-weight: bold; }

#nav {
  background-color: #c6c7c3;
  height: 50px;
  margin-top: 120px;
  z-index: 2; }

また、ピクセルの代わりに em を使用していることにも注意してください。これは、将来ページをモバイル サイトに拡張することを決定した場合に、レスポンシブ デザインに役立ちます。

あなたのhtmlは次のようになります：

<div id="nav">
  <ul>
    <li><a href="index.php">Home</a></li> 
    <li><a href="about.php">About</a></li> 
    <li><a href="school.php">School</a></li> 
    <li><a href="workshop">Workshop</a></li> 
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div>
于 2013-01-09T20:43:12.210 に答える