語義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樣式

回答

相關問題