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;
}

Answer 3

这适用于无序列表：

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

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

只有在项目符号点和列表项文本之间需要额外空间时才需要padding-left。列表项文本包含在自身下方而不是子弹下。

Answer 4

您需要将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;
}

Answer 5

我遇到了同样的问题，这就是我修复它的方法。重要的一行是background-repeat: no-repeat;。子弹点将添加到列表的每个新行/列表项中，但是当文本被包装到下一行时，它不会放置项目符号点。请查看下面的代码，看看我放置它的位置。

ul {
  margin: 0;
  list-style-type: none;
  list-style-position: inside;
}
ul li {
    background-image: url(https://someimage.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 0px 5px 100px;
    padding-left: 39px;
    padding-bottom: 3px;
}

关于我的代码的一些注释：我使用了一个图像作为要点。我还使用background-image:而不是list-style-image:，因为我想控制图像项目符号的大小。如果你想要简单的子弹，你可以简单地使用list-style:属性，这应该适用于包装文本。有关详细信息，请参阅https://www.w3schools.com/cssref/pr_list-style.asp。

Answer 6

尝试简单地设置位置属性： list-style-position: inside;不再需要工作。

这是工作示例： https://codepen.io/sarkiroka/pen/OBqbxv

Answer 7

在测试用pdfreactor生成的pdf的可访问性时遇到了类似的问题，我的问题是list-style-type: disc打破了Adobe acrobat的“阅读顺序窗格”中的“逻辑阅读顺序”。混乱的阅读顺序不会破坏视觉障碍用户的NVDA屏幕阅读器体验，但是会阻止用户正确地为pdf文档添加书签。

我的解决方案是直接从项目符号字符下面换行并固定阅读顺序：

ul {
 list-style-type: none;
}

li {
 margin-left: 10px;
}

li::before {
 content: '•\00A0';
 margin-left: -10px; // a negative margin will remove the bullet from interrupting the flow of the text
}

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

7 个答案: