1

私はフロントエンド開発に比較的慣れていないので、ロゴといくつかのメニューオプションを含む水平メニューを整理する最良の方法を見つけるのに少し問題があります. さらに、水平メニューをワイド | で区切りたいと思います。

それを行う方法がわからない。

これは私がこれまでに持っているものです:

HTML: 

 <header> 
 <img src="/images/logo.png" height="50px" id="front" />
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>

CSS: 

 body {
 margin: 0;
 background-color: #FFFFFF;
 }
 header {
 background-color: #009000;
 height: 85px;
 position: relative;
 }
 #front {
 margin-left: 20px;
 margin-top: 20px;
 }
 ul li {
 display: inline;
 list-style-type: none;
 margin-right: 34px;
 }
4

3 に答える 3

1

とを使用display: inline-block;しfloat: left;ます。

また、css セクションfloat:left;内に配置して、ヘッダー内のナビゲーションを取得します。#front

于 2012-11-28T22:54:38.933 に答える
1

ul/li の代わりに DIV を使用してこれを作成することもできますが、次の CSS を使用して作業を開始できます。

body { margin:0; background-color:#FFFFFF; }
header { background-color:#009000; height:85px; position:relative; }
header:after { content:''; display:block; clear:both; }
header img { float:left; margin:20px 20px 0 20px; }
header ul { list-style-type:none; }
header ul li { float:left; margin-right:34px; border-left:1px solid #000000; padding-left:10px; }
header ul li:first { border:none; padding:0; }

私が別の方法で行ったことがわかるいくつかのことは次のとおりです。

1) ヘッダーにクリア フィックス システムを使用したので、フロートを使用しているときにフロートがクリアされ、ヘッダーの後にそれらについて心配する必要がなくなります。

2) 画像を左に浮かせ、右に余白を追加しました。

3) ul/li を使用しているため、箇条書きをオフにする必要があります。list-style-type:none;

4) li 要素をフロートさせ、それぞれに左側の境界線を付けましたが、最初の li の境界線とパディングを削除しました。

DIV を使用display:inline-block;するとよりクリーンなコードになると思いますが、html を変更したくなく、代わりに css を使用してこれを達成する方法を示しました。

于 2012-11-28T23:28:17.960 に答える
1

これは私にとってはうまくいきました。パイプ文字を使用する代わりに、各リスト要素 (セレクター「ul li」で取得) には細い右側の境界線があります。<li> | </li>各リスト項目の間に追加することもできます。

また、インラインで表示するのではなく、li 要素を左にフロートさせています。ヘッダー内にナビゲーションが必要かどうかわかりません。

HTML:

<header>
  <img src="/images/logo.png" height="70px" id="front" />
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="last"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

CSS:

body {
    margin: 0;
}
header {
    background-color: #009000;
    height: auto;
    position: relative;
}
#front {
    margin-left: 20px;
    margin-top: 20px;
    float: left;
}
nav {
    float: left;
    margin-top: 30px;
}
ul {
    margin: 0;
    padding: 0;
    float: left;
}
ul li {
    list-style-type: none;
    float: left;
    border-right: 2px solid black;
    padding-right: 5px;
    padding-left: 5px;
}
ul li.last {
    border-right: 0px;
}
于 2012-11-28T23:09:11.087 に答える