javascript - 语义 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>

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