文本在 css 列表中的项目符号下换行
我试图让此列表中的所有文本与项目符号齐平。但是，文本环绕在项目符号图像下方。尝试更改 a 和 li 以及 nowrap 上的填充/边距，但这只会使其超出右边框。项目符号是“新闻”下的 WBI 徽标：http://circore.com/womensbasketball/ 有什么想法吗？谢谢！
I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
您可以尝试
，但我个人会使用背景图像和一些填充，例如：
请参阅此页面了解更多详细信息：
http://www.tm4y.co.za/general-tips/css-项目符号列表-styling.html
You could try
but I would personally use a background image and some padding, something like:
See this page for more details:
http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
我用 Firefox 在你的网站上做了这个，它有效
I did this on your site with firefox and it works
这适用于无序列表：
margin-left将整个列表移动 60 像素。仅当您希望项目符号点和列表项文本之间有额外的空间时，才需要
padding-left。列表项文本在其自身下方换行，而不是在项目符号下方换行。This works for unordered lists:
The
margin-leftmoves the whole list in by 60px.The
padding-leftis only needed if you want extra space between the bullet point and the list item text. The list item text wraps under itself and not under the bullet.您需要将
display: inline-block;添加到td元素内的链接。你的课程看起来像这样：
但需要看起来像这样：
You need to add
display: inline-block;to the link inside thetdelement.Your class looked like this:
But need to look like this:
我遇到了同样的问题，这是我解决它的方法。重要的一行是
background-repeat: no-repeat;。项目符号点将添加到列表的每个新行/列表项中，但当文本换行到下一行时，它不会添加项目符号点。看看下面我的代码，看看我把它放在哪里。关于我的代码的一些注释：我使用了图像作为要点。我还使用了
background-image:而不是list-style-image:因为我想控制图像项目符号的大小。如果您想要简单的项目符号，您可以简单地使用list-style:属性，即使对于换行文本，这也应该可以很好地工作。请参阅https://www.w3schools.com/cssref/pr_list-style.asp 有关于此的更多信息。I had the same problem and here is how I fixed it. The important line is
background-repeat: no-repeat;. Bullet points will be added to every new line/list item of your list but it will not put a bullet point when text is wrapped to the next line. Look at my code below to see where I placed it.A few notes on my code: I used an image for the bullet points. I also used
background-image:instead oflist-style-image:because I wanted to control the size of the image bullet. You can simply uselist-style:property if you want simple bullet and this should work well even with wrapped text. See https://www.w3schools.com/cssref/pr_list-style.asp for more information on this.尝试简单设置位置属性：
list-style-position: inside;没有什么需要做的了。这是工作示例：
https://codepen.io/sarkiroka/pen/OBqbxv
Try simple set the position attribute:
list-style-position: inside;nothing more need to work.Here is the working example:
https://codepen.io/sarkiroka/pen/OBqbxv
我在测试使用 pdfreactor 生成的 pdf 的可访问性时遇到了类似的问题，我的问题是
list-style-type:disc破坏了 Adobe acrobat 的阅读顺序窗格中的“逻辑阅读顺序”。混乱的阅读顺序不会破坏视障用户的 NVDA 屏幕阅读器体验，但它确实会阻止用户正确为 pdf 文档添加书签。我的解决方案是修复文本直接在项目符号字符下方换行并修复阅读顺序的问题：
I ran into a similar issue while I testing accessibility of pdfs generated with pdfreactor, my problem was that
list-style-type: discbroke the 'logical reading order' in Adobe acrobat's Reading Order Pane. Having a jumbled reading order won't break the NVDA screen reader experience for visually-impaired users, but it does prevent the user from bookmarking a pdf document correctly.My solution to fix the text from wrapping directly underneath the bullet character AND fix the reading order: