列表样式设置为 none 无效答案

【问题标题】：List style set to none has no effect列表样式设置为 none 无效
【发布时间】：2017-12-02 20:44:49
【问题描述】：

我有……

ul {
    list-style: none;
}

.. 在我的 ul 上，点还在。

从 Chrome 检查器中可以看出，它是最顶级的样式...

任何想法为什么这不能像往常一样工作？

我正在使用 react 创建列表...

class Shift extends React.Component {

    render() {
        return (
            <li>
               ...
            </li>
        );
    }
};

class CommentList extends React.Component {

    render() {

        var nodes = this.props.data.map(function (s) {

            return (
                <Shift key={s.sid} />
            );
        });

        return (
            <ul>
                {nodes}
            </ul>
        );
    }
};

【问题讨论】：

添加你的html/css完整代码
请添加一个 jsfiddle 或演示它的东西。示例：jsfiddle.net/mrmills/0pb5jLx5

标签： html css reactjs

【解决方案1】：

你需要设置

list-style-type: none;

https://developer.mozilla.org/de/docs/Web/CSS/list-style-type

"list-style" 是简写，您还需要在其中添加其他值，在您的情况下您可以这样做

list-style: none outside none;

【讨论】：

我很确定您不需要设置它，因为 list-style: none; 在其他网站上也可以使用。 type 版本无论如何都不起作用 - 单独或与我目前拥有的一样。
除非您添加一个我们只能猜测的可检查示例
是的，很公平。我选择改用divs。
我想我应该把精力留给下一个根本不起作用的东西，有趣的是，我现在正在努力！
我在不同的 CSS 文件中有这个... 'ul li:before { content: '\2022 \00a0 \00a0 \00a0'; }'

【解决方案2】：

试试这个...

ul, li {
     list-style: none !important;
}

这确保我们使用 !important 定位 ul 和 li 标签，使其变得重要，因此我们不会用其他样式推翻它。

【讨论】：

【解决方案3】：

在另一个 CSS 文件中，我有...

ul li:before {
   content: '\2022 \00a0 \00a0 \00a0';
}

所以这不是覆盖列表样式，但它仍然打破了它。

【讨论】：