CSS UL 列表样式不适用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/486211/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:15:05  来源:igfitidea点击:

UL list style not applying

csslistyui-grids

提问by dragonmantank

I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.

我有一个样式表,无论出于何种原因,它都不会将 list-style-type 应用于 UL 元素。我将 YUI 的 Grid CSS 与他们的 reset-fonts-grid.css 文件一起使用,我知道该文件将其作为 CSS 重置的一部分删除。

After calling YUI, I call the stylesheet for the website and in there have a block for UL:

调用 YUI 后,我调用了网站的样式表,其中有一个用于 UL 的块:

ul {list-style-type: disc;}

I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.

我也尝试通过列表样式设置它,但得到相同的结果。我知道上面的 CSS 块正在被读取,就像我添加了填充或边距之类的东西一样。Firefox 或 IE 中均未显示样式类型。

The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.

我应用于 UL 的唯一其他 CSS 位于 #nav div 中,但该 CSS 不涉及列表样式类型,它使用 YUI 提供的重置,而 YUI 和站点样式表是仅有的两个 CSS被调用的表。

I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.

我还在网站的管理端安装了 FCKEditor,该编辑器确实显示了项目符号样式,所以我知道它必须与未由 FCKEditor 过滤的 CSS 相关。

采纳答案by steve_c

If I'm not mistaken, you should be applying this rule to the li, not the ul.

如果我没记错的话,您应该将此规则应用于 li,而不是 ul。

ul li {list-style-type: disc;}

回答by

You need to include the following in your css:

您需要在 css 中包含以下内容:

li { display: list-item; }

li { display: list-item; }

This triggers Firefox to show the disc.

这会触发 Firefox 显示光盘。

回答by user415535

and you can also give a left-margin if the reset.css you are using make all margin null : that means :

如果您使用的 reset.css 使所有边距为空,您还可以提供左边距:这意味着:

li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}

Assuming you apply this css afterthe reset, it should work !

假设您在重置应用此 css ,它应该可以工作!

Matthieu Ricaud

马修·里考

回答by AJ Zane

I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.

我遇到了这个问题,结果证明我在 ul 上没有任何填充,这阻止了光盘可见。

Margin messes with this too

保证金也与此有关

回答by tiberdoo

This problem was caused by the lidisplayattribute being set to blockin a parent class. Overriding with list-itemsolved the problem.

此问题是由在父类中lidisplay设置的属性引起的block。覆盖list-item解决了问题。

回答by PipoPepino

Make sure the 'li' doesn't have overflow: hiddenapplied.

确保没有overflow: hidden应用“li” 。

回答by nara_l

My reset.csswas margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:

我的reset.cssmargin: 0, padding: 0。经过几个小时的查找和故障排除后,这奏效了:

li {
    list-style: disc outside none;
    margin-left: 1em;
}

ul {
    margin: 1em;
}

回答by alimac83

I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.

我遇到了这个问题,结果证明我在 ul 上没有任何填充,这阻止了光盘可见。

回答by Sampson

  • Have you tried following the rule with !important?
  • Which stylesheet does FireBug show having last control over the element?
  • Is this live somewhere to be viewed by others?
  • 您是否尝试过使用 !important 遵循规则?
  • FireBug 显示哪个样式表对元素具有最后控制权?
  • 这是直播给别人看的地方吗?

Update

更新

I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.

The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.

我相当有信心提供代码示例将帮助您更快地获得解决方案。如果您可以在某处上传此问题的示例,或提供标记以便我们可以在我们的本地主机上对其进行测试,您将有更好的机会获得一些有价值的输入。

问题的问题在于它们会导致其他人相信提出问题的人有足够的知识来提出问题。在编程中,情况并非总是如此。你可能错过了一些东西,或者不小心被甩了。如果其他人没有看到您的代码,他们必须假设您没有遗漏任何内容,也没有忽略任何内容。

回答by dylanfm

All I can think of is that something is over-riding this afterwards.

我能想到的就是事后有什么东西压倒了这一点。

You are including the reset styles first, right?

首先包括重置样式,对吗?