图标与 label 文字的对齐方法

链接

200

https://ishadeed.com/article/aligning-list-icons/

分类

文章设计排版开发2026-09-19 08:48:00

简介

文字换行时，更合适的布局是，图标需要对齐首行文本，除了做成图标字体外，还有一些 CSS 小技巧。

相似条目

笔记

Beta

暂无笔记

                                    ..ddddd..                                    ..ddffff...                                d. .dfd..dd.. .                            ..........dd.d...... .                        ....d.d.fdddd  .dd...d.. .                    . .dffdd........dd.d...d..dd                d   . .ddfd.    .  .d..d....dd                .   ..dd.fddd...     ....d...                . ddfdfdfddf.      .......            . .  .....dddd.ddd.   .d.  .d.  d            . . .d......ddfdddd.     ..d..dd. .            . . ..dd. .....ddddd   .       d..d            . .d.    . ..... ...d. .      .....            ......d...... ......dd..     dd..d        . dd.dd..d..       .d..dd f  .ddd..            .ddd..dddd...        .dd.......  d        . d.dddd..         d .   ......d.    d        f  ...ddd..ddd.            ...        .f        .............d.                      .d        . .  ..   ....   .d.ddd.dd..      ...dd    d...  .    ...d..... ... ..  ........dd..d    f. .... .  ......d.d...        ..d..fd....        .... ...  .ddddd..dd.f.       .dd...d..d    ...  ..........f.fdd.d... d    ....d.....    d......   ........dfddfd.     ...  ..d.df    f..........     ....ddd.    .d...   .    ...........   .....ddd.      ... .d    ........dd........dd..          .f    .. .......dd.........         .    ..  ............. .      .. .    ............. ... .      ..    .. ........   . ..      ..    d..........    .       ...  .    .... ...     .. .  .   ...    .. . ...d.  ...d.....   ..    .    ..........    .d...d .   .  .  ...... .....    ..d....      .   ..f............ ....d..... ...     d    fddd...........  .         ...f            .dd.............d