css关于list-style-image的图标图像对齐问题的解决

黄舟
Lepaskan: 2017-06-29 10:25:58
asal
2853 orang telah melayarinya

首先啰嗦下,这个问题早在我刚开始学css是就遇到了,那是可能是大半年前的事了,后来实在没辙,就改用表格来对其小图标和文字。但今天,心血来潮,要不想用那被标准视为“邪道”当中的表格了,于是n月前的问题又重现了。

预期实现效果图:

1639.gif

开始定义css:

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style: url(../images/dot.gif) outside;
 }
 #main li {
 line-height:150%;
 }
Salin selepas log masuk

在ie和firefox当中的效果:

1640.gif

小红三角居然红杏出墙了。瞎折腾了好一阵子,仍然是没辙。(注,小图标本来在垂直方向也和文字没对齐,后来用fireworks加高了,这点就不用说了吧。)

本想在经典论坛里发帖,但觉得太麻烦了,于是到处找相关帖子。

总算发现一个,得到启发,可以把那个小红三角作为li的背景图像啊。

于是有了下面比较巧妙而又合乎目的的定义方法:

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style-type:none;
 }
 #main li {
 background: url(../images/dot.gif) left top no-repeat;
    line-height:150%;
 }
Salin selepas log masuk

效果如下:

1641.gif

拓展:但是如果我想实现下图所示小图标在文字的外端,该怎么办呢?

1642.gif

(1)开始时是想利用设置左侧补白空间(padding-left)来空出背景图像。于是重定义#main li {

padding-left:12px; 
background: url(../images/dot.gif) left top no-repeat;    line-height:150%; }
Salin selepas log masuk

但效果并非所想的那样,如下:

1643.gif

为什么“3月31日”前空出的有一个多左右呢?哦,对了,li属性自动为小图标在首行空出一个字符大小的空出来,即使你定义list-tyle-type:none。

(2)在写本示例写到上面一行时,本想把源文件改回原来的样子,在li里面删了background: url(../images/dot.gif) left top no-repeat;这一句,然后预览,惊喜地发现在ie中呈现出完美的效果出来,真是阴差阳错哦!

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style: url(../images/dot.gif) outside;
 }
 #main li {
 padding-left:12px;
 line-height:150%;
 }
Salin selepas log masuk

效果图:

1644.gif

唯一美中不足的是在firefox里面就没这么幸运了,

padding没有作用的小图标上:

1644.gif

抱着死马当活马医的态度,我把padding-left:12px;改成了margin-left:12px;

预览:

ie:1645.gif

firefox:1643.gif

oh,这是真的吗?

除了,firefox里的小图标和文字间距要比ie中的要宽那么一点点之外,真的近乎完美了。

让我们放鞭炮庆祝下吧!

最后让我们记住最标准的list-style-type:image;的定义方法吧:

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style: url(../images/dot.gif) outside;
 }
 #main li {
 margin-left:12px;
 line-height:150%;
 }
Salin selepas log masuk

Atas ialah kandungan terperinci css关于list-style-image的图标图像对齐问题的解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan