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

...表示 "width" 不是可覆盖的属性。那么，如何设置宽度呢？貌似，我可以选择"mini menu"、"small menu"..."massive menu"等不同的菜单大小，对我来说完全没用。有什么想法吗？

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 链接。

语义 UI 和基本 CSS 样式

Semantic UI and basic CSS styling

javascript

css

semantic-ui