文本正在包装在css列表中的项目符号

我试图让这个列表中的所有文本都与子弹齐平。但是，该文本正在包装在子弹形象下。尝试改变a和li上的填充/边距以及nowrap，但这只是让它突出显示在右边框上。子弹是WBI徽标新闻：http://circore.com/womensbasketball/任何想法？谢谢！文本正在包装在css列表中的项目符号

来源

2012-02-06 Elaine

请问您可以在这个问题中添加原始相关代码，以便将来可能会遇到同样问题的人员有用吗？ – KatieK 2012-02-06 18:40:18

除了左侧填充规范外，代码在我的答案中是相同的。 – PAULDAWG 2012-02-06 18:49:45

我这样做是在您的网站与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; 
}

来源

2012-02-06 16:36:45 PAULDAWG

你可以尝试

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

来源

2012-02-06 16:17:27

使背景成为子弹图像并取下子弹类型的作品。然而，链接中的第二行文字包裹了图像。这些都是来自WordPress的帖子的邮政标题，所以我不能在那里添加一个简单的
。 – Elaine 2012-02-06 16:37:41

您是否向元素添加了填充以将文本移动到图像之后？ – 2012-02-06 16:42:51

图像是列表背后的背景图像，所以我无法添加填充。 – Elaine 2012-02-06 16:45:44

你需要将display: inline-block;添加到td元素内的链接。
您的类是这样的：

#menu-news li a { 
    color: #000000; 
    font-family: Arial,Helvetica,sans serif; 
    font-size: 13px; 
    margin-top: 10px;´ 
}

不过需要看起来像这样：

#menu-news li a { 
    display: inline-block; 
    color: #000000; 
    font-family: Arial,Helvetica,sans serif; 
    font-size: 13px; 
    margin-top: 10px; 
    width: 200px; 
}

来源

2012-02-06 16:20:53 Niklas

是的！现在都在表现。谢谢大家！ – Elaine 2012-02-06 16:49:03

这适用于无序列表：

#menu-news ul { 
list-style:outside circle; 
margin-left:60px; 
} 
#menu-news ul li { 
padding-left:20px; 
}

margin-left将整个列表移动60px。

padding-left仅在需要在项目符号点和列表项文本之间留有额外空间时才需要。列表项文本包装在自身下方，不在子弹头下。

来源

2012-05-04 13:45:30 user1375098

文本正在包装在css列表中的项目符号

回答

相关问题