リスト横並びinline-blockの余白をなくす – お仕事手帳bloominc

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

MENU

css

リスト横並びinline-blockの余白をなくす

2018/08/18

リスト横並び

font-size:0;だとfontを%指定した時にややこしいので、letter-spacingで文字間を詰めて隙間をなくした方が良い。

.list { /* 親要素 */
    letter-spacing: -.4em; /* 文字間を詰めて隙間をなくす */
}

.list li { /* 子要素 */
    display: inline-block;
    letter-spacing: normal; /* 文字間を元に戻す */
}

1

2

3

4

5

6

7

8

.list { /* 親要素 */

letter-spacing: -.4em; /* 文字間を詰めて隙間をなくす */

}

.list li { /* 子要素 */

display: inline-block;

letter-spacing: normal; /* 文字間を元に戻す */

}