html - jQuery UI アイコンを適切に表示する

Question

2 つのアイコンを含むアイコン セットを作成しようとしましたが、jQuery UI css ファイルをインポートして例から html をコピーしようとしましたが、うまくいきません。

このフィドルでアイコンをこれらのように見せるのを手伝ってくれる人はいますか?

Answer 1

コンテナーとアイコンにいくつかの CSS を追加する必要があります。

li.ui-state-default {
    padding: 4px 0; /* this will add some space top/bottom */
    float: left;  /* LI is a block by default so it take full width */
    /* display: inline-block; you could also use inline-block instead of float */
}

.ui-icon {
    margin: 0 4px; /* this gives the icon left/right space */
}​

デモ

Answer 2

ホバー/アクティブ状態を失っているため、機能的に完全に一致することはありませんが、パディングを追加してliをインラインブロックに設定することで、かなり近くすることができます.

li{
    display:inline-block;
    margin:.25em 0 0 .25em; /*Just for spacing in the demo*/
    padding:.25em;
}

http://jsfiddle.net/RKwky/3/