语义 UI 和基本 CSS 样式

Question

我在语义 UI 菜单上应用一些非常基本的 CSS 时遇到问题。就我而言，我有两个垂直菜单， 沿着左边距，显然我需要它们都具有相同的宽度，否则看起来会很疯狂。 但是，嗯……这里开始出现一些意想不到的麻烦。我试过这样的东西：

<div class="ui labeled compact vertical icon menu" style="width: 250px;">

这行不通。然后我查看了https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css中包含的css文件

..并试图在我的页面上覆盖一些 CSS，如下所示：

.ui.menu {
 width: 250px;
}

但这也行不通。然而， 部分后仔细研究巨大的 CSS 文件：

/*******************************
     Theme Overrides
*******************************/
/*******************************
     Site Overrides
*******************************/
/*
 * # Semantic - Menu
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
         Standard
*******************************/

/*--------------
  Menu
---------------*/

.ui.menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 1rem 0em;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-weight: normal;
border: 1px solid rgba(34, 36, 38, 0.15);
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
border-radius: 0.28571429rem;
min-height: 2.85714286em;
}

...表示“宽度”不是可覆盖的属性。 那么，如何设置宽度呢？ 看起来，我可以选择不同的菜单大小，比如“迷你菜单”、“小菜单”……“海量菜单”，对我来说绝对没用。 有什么想法吗？

Answer 1

避免为元素指定绝对大小 - 正确的做法是使用 grid 和菜单的 fluid 属性，使其使用父元素的全宽（在这种情况下，网格列）。

<div class="ui grid">
  <div class="two wide column">
     <div class="ui labeled compact vertical fluid icon menu">
       <!-- your first menu -->
     </div>
  </div>
  <div class="two wide column">
     <div class="ui labeled compact vertical fluid icon menu">
       <!-- your second menu -->
     </div>
  </div>
  <div class="twelve wide column">
    <!-- your content here -->
  </div>
</div>

当然，根据需要调整列宽。

Answer 2

尝试在您的 CSS 代码中添加 !important。

Answer 3

尝试重新排列您的 css 链接。