文本在css列表中的子弹下包装

Question

我试图让这个列表中的所有文本都与子弹齐平.但是,文本包含在子弹图像下.尝试更改a和li以及nowrap上的填充/边距,但这只是让它伸出右边框.子弹是新闻下的WBI标识:http://circore.com/womensbasketball/ 任何想法？谢谢!

Answer 1

你可以试试

ul {
  list-style-position: outside;
}

但我会亲自使用背景图片和一些填充,如:

li {
    list-style: none;
    background: transparent url(your/icon.png) no-repeat left center;
    padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}

有关详细信息,请参阅此页面:http: //www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html

Answer 2

我用你的Firefox在你的网站上做了这个,它的工作原理

#menu-news li:first-of-type {
    border-top: medium none;
    height: 55px;
    list-style-position: inside;
    margin-left: 8px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
    vertical-align: top;
}

#menu-news li {
    background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
    border-top: 1px solid #666666;
    height: 55px;
    list-style-position: inside;
    margin-left: 10px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
}