0

作成した単純な「ul」メニューに問題があります。私が達成したいのは、ロゴ画像ではなく、メニュー項目1〜4にパディングを追加することです。「a」タグでクラスを試しましたが、喜びはありませんでした。あなたが期待する「ul.menu」を選択して、UL全体をパディングできます。(これはすべて display:inline で発生します) display:inline の代わりに float:left を使用すると、「a」タグのみを選択できますが、これを行うと、メニュー全体をヘッダーで中央に配置するのに苦労しています。

それで、解決策は何ですか？ロゴ画像ではなく「a」タグだけに100pxのパディングトップを追加したい。

HTML

<body>
  <div class="wrapper clearfix">

    <div id="header">

 <nav> 
    <ul class="menu">
      <li><a href="#">item 1</a></li>
      <li><a href="#">item2</a></li>
      <img src="images/logo.png" id="logo">
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
    </ul> 

 </nav>     

    </div><!--end of header-->

  </div><!--end of wrapper-->
</body>

CSS

li {
display:inline;
padding-left: 2%;   
padding-right: 2%;
}

.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height: 400px;
display: block;
background-image:url(../images/header.jpg);
font:"Agency FB";
}

#logo   {
padding-top: 1%;
padding-bottom: 1%; 
}

どうもありがとう

4

1 に答える 1

0

ul に img タグを入れることは有効な HTML ではありません。最初に img を li タグでラップし、次のように ID を指定する必要があります。

<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Stuff2</a></li>
<li id="logo_li"><img src="myimage.jpg"></img></li>
</ul>

次に、次のような CSS を適用します。

ul li {
padding-top: 100px;
}
ul li#logo_li {
padding-top: 0px;
}

これは、達成したいことの jsfiddle の実例です: http://jsfiddle.net/4BjEz/ (li の高さ + パディングを確認できるように赤い境界線を追加しました)

于 2013-04-29T00:57:24.003 に答える