Question

我有两个菜单，一个固定在底部，另一个固定在顶部。我的问题是双重的。我希望它们出现在屏幕的中心，只是它们内容的宽度（而不是默认的流畅）。

我在文档中没有发现任何表明这是可能的，所以可能解决方法是用CSS修改它？

非常感谢任何帮助。

Answer 1

使用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 Link：http://jsfiddle.net/pLskpufp/2/

Answer 2

您也可以使用中心对齐的容器：

<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 Link：http://jsfiddle.net/377v6ect/1/

Answer 3

我知道它不是一个纯粹的语义UI解决方案，但对于那些想要通过语义UI中的固定菜单来实现此目的的人来说，到目前为止我找到的最佳解决方案是用一个小的自定义CSS将它包装在一个div中。

<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;
}

Answer 4

我在语义论坛和其他地方搜索过；创造了我的。希望也为您工作。

   <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>

语义UI中心非流动菜单？

4 个答案: