语义UI和基本CSS样式

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

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

这是行不通的。然后我看着css文件我包括https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.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; 
}

...表示“宽度”是不是可重写的属性。那么，如何设置宽度？貌似，我只能选择不同的菜单大小，如“迷你菜单”，“小菜单”......“大量菜单”，对我来说绝对无用。任何想法？

来源

2017-05-28 Perry J

避免指定元素的绝对大小 - 正确的方法是使用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>

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

来源

2017-05-29 00:13:16 fstanis

谢谢。是的，类似这样的事情在我脑中流传了一段时间，也会试试这个，并告诉你它是如何发生的。 –

为了使这种方法奏效，我相信我必须确保我可以使用整个屏幕宽度。你看，我也在一个PHP框架（Yii2）中工作，默认情况下，它总是将所有内容放在屏幕的水平中心区域，左边和右边有大量的空边距。我不想那样，但我不知道如何改变它。所以暂时我用我的菜单使用一些蛮力，比如'position：fixed，left：12px'。这使我的菜单在最左边，就像我想要的那样。但我怀疑网格方法会保持在该区域内？ –

网格将增长到父级的大小 - 您可以将菜单单独放在网格中，给它们分配“八个宽列”以使它们具有相同的宽度，然后根据需要定位和调整网格的大小。然而，Semantic UI支持[固定菜单]（https://semantic-ui.com/collections/menu.html#fixed），为什么不使用它呢？ – fstanis

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

来源

2017-05-29 01:03:03

谢谢Vandolph！会试试看！ –

我认为使用'！important'变得越来越难以维持加班。最好使用更具体的样式进行不依赖于优先级的覆盖。 https://stackoverflow.com/a/3427813/861010 –

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 - [来自评论]（/ review/low-quality-posts/17386190） –

-1

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

来源

2017-05-29 01:07:55

谢谢。我在页面的头部使用CDN链接，严格在学校图书后 –

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 https://stackoverflow.com/review/low-quality-posts/17386190 –

语义UI和基本CSS样式

回答

相关问题