文本在 css 列表中的项目符号下换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9163240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text is wrapping under bullet in css list
提问by Elaine
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!
我试图让这个列表中的所有文本都与项目符号齐平。但是，文本在项目符号图像下环绕。尝试更改 a 和 li 以及 nowrap 上的内边距/边距，但这只会使其突出在右边框上。子弹是新闻下的 WBI 标志：http://circore.com/womensbasketball/ 有什么想法吗？谢谢！
采纳答案by PAULDAWG
I did this on your site with firefox and it works
我在你的网站上用 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;
}
回答by Grim...
You could try
你可以试试
ul {
list-style-position: outside;
}
but I would personally use a background image and some padding, something like:
但我个人会使用背景图片和一些填充，例如：
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 */
}
See this page for more details: http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
有关更多详细信息，请参阅此页面：http: //www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
回答by user1375098
This works for unordered lists:
这适用于无序列表：
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
The margin-leftmoves the whole list in by 60px.
在margin-left由60像素移动的整个列表。
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.
的padding-left，如果你想子弹点和列表项文本之间的额外空间时，才需要。列表项文本环绕在自身下方，而不是在项目符号下方。
回答by Niklas
You need to add display: inline-block;to the link inside the tdelement.
Your class looked like this:
您需要添加display: inline-block;到td元素内的链接。
你的课是这样的：
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;′
}
But need to look like this:
但需要看起来像这样：
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}
回答by Van I
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.
我遇到了同样的问题，这是我修复它的方法。重要的一行是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;
}
A few notes on my code: I used an image for the bullet points. I also used background-image:instead of list-style-image:because I wanted to control the size of the image bullet. You can simply use list-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.aspfor more information on this.
关于我的代码的一些说明：我使用了一个图像作为要点。我也使用了background-image:而不是list-style-image:因为我想控制图像项目符号的大小。list-style:如果您想要简单的项目符号，您可以简单地使用属性，即使使用换行文本，这也应该可以很好地工作。有关更多信息，请参阅https://www.w3schools.com/cssref/pr_list-style.asp。
回答by sarkiroka
Try simple set the position attribute:
list-style-position: inside;nothing more need to work.
尝试简单地设置位置属性：
list-style-position: inside;没有更多的工作需要。
Here is the working example: https://codepen.io/sarkiroka/pen/OBqbxv
