web-dev-qa-db-ja.com

セマンティックUI中心の非流動メニュー？

2つのメニューがあります。1つは下部に固定され、もう1つは上部に固定されています。私の問題は2つあります。画面の中央に表示し、コンテンツの幅のみにする必要があります（デフォルトのように流動的ではありません）。

これが可能であることを示すドキュメントには何も見つかりませんでした。おそらく解決策はCSSで変更することですか？

どんな助けでも大歓迎です。

htmlcsssemantic-ui
14
Nathan McCallum

UIメニューにセマンティックUIクラス「compact」を使用してコンテンツに調整してから、グリッドと列を使用して中央揃えにします。したがって、たとえば：

<div class="ui centered grid">
    <div class="center aligned column">
        <div class="ui compact menu">
          <a class="active item">
            <i class="home icon"></i> Home
          </a>
          <a class="item">
            <i class="mail icon"></i> Messages
          </a>
        </div>        
    </div>
</div>

JSFiddleリンク： http://jsfiddle.net/pLskpufp/2/

20
MTran

中央揃えのコンテナを使用することもできます。

<div class="ui center aligned container">
    <div class="ui compact menu">
        <a class="active item">
            <i class="home icon"></i> Home
        </a>
        <a class="item">
            <i class="mail icon"></i> Messages
        </a>
    </div>        
</div>

JSFiddleリンク： http://jsfiddle.net/377v6ect/1/

3
Bonnici

純粋なセマンティックUIソリューションではないことはわかっていますが、セマンティックUIの固定メニューを使用してこれを行う方法を探している人にとって、これまでに見つけた最善のソリューションは、少しカスタムを使用してdivでラップすることです。 CSS。

<div className="fixed bottom">
  <div className="ui centered grid">
    <div className="center aligned column">
        <!-- Your Semantic UI menu here, but not fixed. -->
    </div>
  </div>
</div>

このcssと一緒に...

div.fixed {
  width: 100%;
  position: fixed;
}
div.fixed.bottom {
  bottom: 0;
}
div.fixed.top {
  top: 0;
}
1
ihake

セマンティックフォーラムやその他の場所で検索しました。作成された私の..希望もあなたのために働きます。

   <div class="ui center aligned container">
    <div class="ui" style="background-color: #009999;">
      <!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
        <div class="ui centered small image" >
            <a href="#">
            <img class="logo" src="./logo_white.png">
            </a>
        </div>
    <!-- </a> -->
    </div>
</div>
0
Musa Toktaş