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

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/任何想法?谢谢!

5 个解决方案

#1

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

#2

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

#3

This works for unordered lists:

这适用于无序列表:

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

The margin-left moves the whole list in by 60px.

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

The padding-left is 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.

只有在项目符号点和列表项文本之间需要额外空间时才需要填充左侧。列表项文本包含在自身下方,而不是在项目符号下。

#4

You need to add display: inline-block; to the link inside the td element.
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;
}

#5

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.

我有同样的问题,这是我如何解决它。重要的一行是背景重复:不重复;子弹点将添加到列表的每个新行/列表项中,但是当文本被包装到下一行时,它不会放置项目符号。看看我下面的代码,看看我放在哪里。

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.asp for more information on this.

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

#1