文本在 CSS 列表中的项目符号下换行答案

【问题标题】：text is wrapping under bullet in css list文本在 CSS 列表中的项目符号下换行
【发布时间】：2020-11-03 04:58:48
【问题描述】：

我正在尝试使此列表中的所有文本与项目符号齐平。但是，文本在项目符号图像下换行。尝试更改 a 和 li 以及 nowrap 上的填充/边距，但这只会使其超出右边框。项目符号是新闻下的 WBI 标志：http://circore.com/womensbasketball/ 有什么想法吗？谢谢！

【问题讨论】：

能否请您将原始相关代码添加到此问题中，以便将来可能遇到相同问题的人有用？
除了左侧填充规范外，我的答案中的代码相同。

标签： css list

【解决方案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

【讨论】：

将背景制作成子弹图像并取下子弹之类的作品。但是，链接中的第二行文本会覆盖图像。这些都是来自 wordpress 帖子的帖子标题，所以我无法在其中添加简单的
。
您是否为元素添加了填充以将文本移到图像之外？
该图片是列表后面的背景图片，所以我无法为其添加填充。

【解决方案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;
}

【讨论】：

【解决方案3】：

这适用于无序列表：

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

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

padding-left 仅在您希望项目符号点和列表项文本之间有额外空间时才需要。列表项文本在其自身下方而不是在项目符号下方。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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
}

【讨论】：