0

私はこれを尋ねなければならないモロンのように感じますが、私は常にCSSを回避してきました。そして今、再びそれを必要としていることに気付いたので、運が悪かった例としてGoogleを清掃してきました。

基本的に、各カテゴリに固有のアイコンがあり、これらを使用してCSS / HTMLで水平ナビゲーションバーを作成したいのですが、その下にもテキストリンクを表示したいと思います。どちらか一方を実行するためのスニペットを見つけましたが、2つを組み合わせようとするたびに、ページ全体が壊れているように見えます。

誰かがこれを行う方法の例を提供できますか？それが役立つなら、それは基本的に次のようになります...

[-IMAGE-]     [-IMAGE-]     [-IMAGE-]
[-TEXT-]      [-TEXT-]      [-TEXT-]
4

2 に答える 2

0

http://jsfiddle.net/LajUZ/2/

HTML：

<ul class="nav">
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
</ul>​

CSS：

.navitem
{
    float: left;
}​
于 2012-07-22T11:21:04.807 に答える
0

効果は、要素に適切に適用されたbackground-positionCSSで 簡単に通過できます。padding-topli

background-position: top;
padding-top: 50px; /* Height of image */

これがフィドルの例です。

アップデート：

これは、さまざまな要素にさまざまな画像を使用した、より説明的なフィドルです。li

于 2012-07-22T11:46:43.413 に答える