奇怪的项目符号样式 - 我怎样才能使它们正常？答案

【问题标题】：Odd bullet point style - how can I make them normal?奇怪的项目符号样式 - 我怎样才能使它们正常？
【发布时间】：2014-09-05 17:49:53
【问题描述】：

我的 Wordpress 主题，样式很糟糕（它们看起来应该是可扩展的！）。

http://79.170.44.112/activate-enterprise.co.uk/kiryoku-leadership-programme/

我需要在我的 css 上添加/删除什么才能将它们恢复为正常样式？

这是我的样式表中的列表代码：

ol {
list-style: decimal;
margin: 0 0 18px 1em;
}
ol li {
list-style: decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0 !important;
}

ul ul li, ul ul ul li {
border-bottom: none !important;
}

ul {
margin: 0;
list-style: none;
padding: 0;
}

#container ul {
margin-bottom: 15px;
}

.content ul {
padding-left: 15px;
}

.content ul li, .sidebar-container ul li, .slide-content ul li {
overflow: hidden;
padding: 2px 0 2px 17px;
background: url(images/bullet.png) no-repeat 0 10px;
}

#container ul li ul li { border-bottom: none; }

非常感谢，

山姆

【问题讨论】：

标签： html css wordpress

【解决方案1】：

更改这些样式：

.content ul li, .sidebar-container ul li, .slide-content ul li {
overflow: hidden;
padding: 2px 0 2px 17px;
background: url(images/bullet.png) no-repeat 0 10px;
}

ul {
margin: 0;
list-style: none;
padding: 0;
}

到这里：

.content ul li, .sidebar-container ul li, .slide-content ul li {
padding: 2px 0 2px 17px;
list-style-type: disc;
}

ul {
margin: 0;
padding: 0;
}

应该解决这个问题。

css 正在移除点并添加该背景图像。

编辑：如果您不想在点和文本之间留出太多空间，您可能还想删除 padding: 2px 0 2px 17px; 样式。

【讨论】：

太棒了，谢谢。你知道如何去掉项目符号下面的虚线吗？
我自己想出来的！在我的样式表中添加以下内容 .content ul li, .sidebar-container ul li, .slide-content ul li {border: none !important; }

【解决方案2】：

.content ul li, .sidebar-container ul li, .slide-content ul li {
/*overflow: hidden;*/
padding: 2px 0 2px 17px;
/*background: url(images/bullet.png) no-repeat 0 10px;*/
}

ul {
margin: 0;
/*list-style: none;*/
padding: 0;
}

有了这段代码，你应该没问题。

【讨论】：

【解决方案3】：

更改您在上面粘贴的以下代码移除背景并添加列表样式属性

.content ul li, .sidebar-container ul li, .slide-content ul li {

padding: 2px 0 2px 17px;
list-style: square outside none;

}

【讨论】：

【解决方案4】：

您在此处使用图像

.content ul li, .sidebar-container ul li, .slide-content ul li {
overflow: hidden; /* disable this */
padding: 2px 0 2px 17px;
background: url(images/bullet.png) no-repeat 0 10px; /* disable this */*
}

禁用或删除该图像代码并根据需要进行调整。

ul {
margin: 0;
list-style: none; /* disable this */
padding: 0;
}

请注意，这可能会对其他页面产生连锁反应。

【讨论】：