Javascript 语义用户界面和基本CSS样式

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

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

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

…表示宽度不是可重写的属性。 那么，如何设置宽度呢？ 看起来，我可以选择不同的菜单大小，比如迷你菜单，小菜单…大菜单，对我来说绝对没用。

---

有什么想法吗？

避免为元素指定绝对大小-正确的方法是使用菜单的“流体”属性，该属性使其使用父元素（在本例中为网格列）的全宽

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

---

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

尝试添加！重要的css代码。

尝试重新安排css链接。

谢谢Vandolph！我会试试看！我想使用！保持加班变得越来越困难。最好对不依赖于优先级的替代使用更具体的样式。非常感谢。是的，像这样的东西已经在我脑海中流传了一段时间，我也会尝试一下，并告诉你它是如何进行的。为了让这种方法发挥作用，我相信我必须确保我有整个屏幕的宽度来玩。你看，我也在使用PHP框架Yii2，默认情况下，它似乎总是将所有内容放在屏幕水平居中的区域内，左右两边都有很宽的空白。我不想这样，但我也不知道如何改变它。所以目前我在菜单上使用了一些蛮力，比如位置：固定，左：12px。这就把我的菜单放在了最左边，就像我想要的那样。但我怀疑网格方法会保留在区域内？网格只会增长到父级的大小-您可以将菜单单独保留在网格中，给它们八个宽列，使其宽度相等，然后根据您的意愿定位和调整网格的大小。但是，语义UI支持，所以为什么不直接使用它呢？非常感谢。是的，栅格采用其父栅格的大小。是否可以使用“居中区域”视口？当视口成为父视口时，框架为我提供了一个完美的工作环境，包括宽度等。但是我需要菜单和网格也在视口之外。这需要更多的工作，但这是可能的。也会检查固定菜单！然而，在你的帮助下，我知道如何继续下去。我会记下这个问题的答案。谢谢。我在he页面的标题部分使用了CDN链接，严格地说是在校本书后，这并没有提供问题的答案。若要评论或要求作者澄清，请在其帖子下方留下评论。