2

Zurb Foundation を使用して、次のトップ バーを実現しようとしています。

(プレーンな HTML でこれを行う方法は知っていますが、Foundation を使用して正しい方法を見つけようとしています。)

topbar_example

これで、左側にタイトル領域の名前 (これで問題ありません) が表示され、右側には "Hi, Joe!" が表示されます。は単なるプレーンテキストであり、「設定の変更」と「ログアウト」はそれぞれリンクです (これは機能しません)。

これをビルドすると、次のようになります...

topbar_example_002

そして、これが私が使用しているコードです...

<nav class="top-bar">
  <ul class="title-area">
    <li class="name"><h1><a href="#">Acme Company</a></h1></li>
    <li class="toggle-topbar"><a href="#"></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li>Hi, Joe!</li>
      <li>
        <a href="#">Change Settings</a> | <a href="#">Log out</a>
      </li>
    </ul>
  </section>
</nav>

では、Foundation を上記の元の設計例で動作させるにはどうすればよいでしょうか?

4

1 に答える 1

3

Foundation は、aタグを使用してスタイルを設定します。liそれらを 2 つの別々のタグに入れる方がよいでしょう。

例えば

<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>

あなたもHi, Joe!空白のaタグに入る必要があります。

于 2013-10-29T11:21:34.707 に答える