如何重寫JQuery UI樣式？

我正在使用可排序的JQuery UI，它似乎強制可排序的元素具有display：block。如何重寫JQuery UI樣式？

但是，我希望這些元素具有display：inline-block。

我試過使用這個CSS： .item {display：inline-block！important; }

但它不起作用（由Chrome控制檯中的計算樣式證明）。

我用下面的jQuery聲明還嘗試： $（ '項目'）的CSS（{顯示： 'inline-block的'}）。

但是，這並不工作。

如何覆蓋JQuery UI樣式？

來源

2013-12-19 user1050268

通過使用高特異性CSS選擇器。 – DrCord

你在引用'jquery-ui.css'之前還是之後定義了你的CSS？ –

我甚至沒有在任何地方引用jquery-ui.css，我只是使用jquery-ui.js – user1050268

解決的辦法是設置float：none，它允許顯示所需的內聯塊顯示樣式。然後，我必須設置vertical-align：top來使元素在頂部對齊。總css：

.item { 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
}

來源

2013-12-20 13:49:15 user1050268

你確定你的目標是正確的嗎？

我爲我的jquery-ui排序，它完美的作品。

#tabs .word-list li { 
margin: 3px; 
background-color: #FCFCFC; 
padding: 7px 16px; 
border-radius: 30px; 
border-bottom: 2px solid #C7C7C7; 
border-right: 2px solid #B1B1B1; 
display: inline-block; 
}

我也不加載jquery-ui-css文件，我相信它是臃腫的。無論如何，我推出了這些元素的風格，可能不是你的情況。

嘗試更具體的定位。像我一樣。 ID->類。

另外，您可以嘗試在自定義樣式之前包含jquery-ui-css文件。

來源

2013-12-19 21:34:39

我絕對是針對正確的類，具有高度的特異性。我也從來沒有加載jquery-ui-css文件，我只使用jquery-ui.js文件。所以我不知道爲什麼它不在我的最後... – user1050268

@ user1050268讓jsfiddle比:) – 2013-12-19 21:52:17

好的建議！事實證明，我的問題是低於jQuery UI的水平，實際上是一個問題，我一般用html/css。正如在，我想要在下面的jsfiddle浮動的元素，以便第四個項目與其容器的左邊界齊平（而不是直接包裝在第三個項目下）http://jsfiddle.net/emg6x/你知道如何做到這一點，而不訴諸創造只是行容器的div？ – user1050268

如何重寫JQuery UI樣式？

回答

相關問題