1

こんにちはみんな私は基礎フレームワークを使用して固定ナビゲーションを構築しています

私のhtmlは次のとおりです

<div class="fixed">
            <div class="contain-to-grid">
                <nav class="top-bar">
                    <ul class="title-area">
                        <li class="name hide-for-medium-up"><h1><a href="#">topbar</a></h1></li>
                        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                    </ul>                       

                    <div class="top-bar-section">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">about</a></li>
                            <li><a href="#">services</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

私の質問は次のとおりです:-大型デバイスのタイトル領域を削除する必要があり、トップバーセクションを水平方向に中央に配置する必要があります. top-bar-sections の ul タグに left または right クラスを適用することで、このセクションを左または右に揃えることができます。しかし、それを中央に配置する方法が見つかりませんでした。次のsassルールを使用しました。しかし、それはうまくいきませんでした

.top-bar-section {
  text-align: center;
  margin: 0 auto;
  ul {
     li {
       a {
         font-size: emCalc(14px);
         font-weight: 400;
       }
     }
  }
}
4

2 に答える 2

0

これは、すべてのサイズ変更イベントで機能する、私が見つけた最良のソリューションです。Foundation 5 Top-bar 要素を中央に配置します。

「contain-to-grid」div クラスは、ウェブサイトのフレームワーク内でトップバー ナビゲーションの幅を維持しますが、実際にはナビゲーション要素を中央に配置しないことに注意してください。

以下のコードはそうです。

SCSS:

nav.top-bar:not(.expanded) {
            text-align: center;
            section.top-bar-section { display: inline-block; }
                           }

HTML:

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#"></a></h1>
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <ul>
                <li><%= link_to 'LINK 1', root_path %></li>
                <li class="divider"></li>
                <li><%= link_to 'LINK2', link_path %></li>
                <li class="divider"></li>
                <li class="has-dropdown">
                    <%= link_to 'Dropping', "#" %>
                    <ul class="dropdown">
                        <li><label>Label:</label></li>
                        <li><%= link_to 'DROP 1', drop_path %></li>
                        <li class="divider"></li>
                        <li><%= link_to 'DROP 2', drop_path %></li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>
于 2014-06-16T03:35:45.840 に答える