CSS列表样式图像

我得到了一个CSS列表样式图像标签的问题我的列表图像是一些什么大的，文本后面它被推下来的样式标签的下半部分，有没有修复了位回中间CSS列表样式图像

现在是这样的：

 
| 
| 
| here

，我想：

 
| 
| here 
|

来源

2011-01-09 PRennings

该|或者在每个人的下面，有一些他们在我发布时弄错了：x – PRennings

我不确定我是否理解这个问题。你能详细解释一下吗？实际的代码示例总是有用。 –

你的问题有点不清楚，但它听起来像是你可能需要看背景图像r （或补充）列表式图像。

来源

2011-01-09 01:36:36 keithjgrant

只需增加有问题的li元素的行高即可。

#iconlist li { 
    line-height: 2em; 
}

此外，正如keithjgrant建议，我会使用背景图像，而不是。列表图像在不同的浏览器中定位相当不一致。因此，使用这样的事情：

#iconlist li { 
    padding-left: 22px; 
    background: url(20x20-icon.png) left center no-repeat; 
    line-height: 22px; 
    list-style: none; 
}

来源

2011-01-09 12:27:10 Gerben

唯一现实的方式实现这一目标是background-image：

ul li { 
    background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;; 
    list-style-position: outside; 
    padding-left: 250px; 
    line-height: 160px; /* vertical height of image */ 
}

JS Fiddle demo。

然而，这是，但是，fail badly if the text of the li wraps to a second (or third) line。

来源

2011-01-09 13:04:11

尝试vertical-align: middle;（CSS）

来源

2012-02-25 22:17:40 Dudu

忘记设置列表样式图像，并使用下面的CSS ...

ul#example li { 
    list-style-type: none; 
} 

/* create new marker */ 
ul#example li:before { 
    display: marker; 
    content: url("new_marker.png"); 
    /* set the following to fit your needs */ 
    vertical-align: 3px; 
    padding-left: 2px; 
    padding-right: 12px; 
}

注意垂直对齐风格，将它设置为负的数字向上推文。

Source of answer.

来源

2012-07-20 15:11:50

CSS列表样式图像

回答

相关问题