0

「Bella」ロゴの下に「by Jackie」を表示するのに問題があります。下に移動する唯一の方法は、多くのスペースを追加する改行を使用することです。誰でもこの問題を解決する方法について提案があります。

HTML:

<div class="header">
 <div class="wrapper">
  <h1><a href="#">Bella<i>by Jackie</i></a></h1>
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="whatwedo.html">What We Do</a></li>
     <li><a href="features.html">Features</a></li>
     <li><a href="benefits.html">Benefits</a></li>
     <li><a href="#">Gallery</a></li>
     <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

CSS:

.header h1 {
float: left;
line-height: inherit;
background: #969;
padding: 0px 30px 0px 30px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 0px 0px 2px 2px;
margin-top: 0px;
}

.header h1 a {
margin-bottom:-20px;
}

.header h1 i {
font-family: 'Lobster', cursive;
font-size: medium;
font-style: normal;
padding-left: 0.5em;
padding-top: -10px;
}

.header h1 a {
font-family: 'Lobster', cursive;
font-size: 36px;
}

ここに参照がありますhttp://jsfiddle.net/XxEaz/

4

4 に答える 4

2

に設定するだけでdisplay:block、目的の効果が得られます。HTML を追加する必要はありません。

ここでjsFiddle

.header h1 i {
    display: block;
}
于 2013-10-14T17:12:52.137 に答える
1

display:block;に追加 

.header h1 i {
    font-family:'Lobster', cursive;
    font-size: medium;
    font-style: normal;
    padding-left: 0.5em;
    padding-top: -10px;
    display:block;
}
于 2013-10-14T17:15:03.740 に答える
0

最初に、可能であれば I タグを SPAN タグに変更します。そのセマンティックな目的は、参考文献のドキュメント (本/雑誌/記事のタイトル) です。

2 番目: "Bella" と "By Jackie" をそれぞれ独自の SPAN にラップします。

<h1>
  <a href="#" title="">
    <span class="header-title org">Bella</span>
    <span class="header-title owner">By Jackie</span>  
  </a>
</h1>

これで、CSS は次のようにするだけで済みます。

.header .header-title {display: block}
于 2013-10-14T19:18:08.130 に答える