Question

我有一个HTML有序列表，我需要应用删除线。我在CSS中完成了以下操作：

.Lower-Alpha {
  list-style: lower-alpha;
  margin-top: 2pt;
  margin-bottom: 2pt;
  text-decoration: line-through;
}

我遇到的问题是，这会打击列表中的内容，而不是列表中的内容（我需要同时执行这两项操作）。

例如我得到：一个。 ~~触及内容~~

但我需要： <击>一个。触及内容

欢迎任何建议。干杯

Answer 1

像馅饼一样简单：list-style-position: inside;

http://jsfiddle.net/seler/NWbrR/

编辑：它看起来像是依赖于浏览器的行为。在mozilla，它可以提供。

EDIT2：为了完整的浏览器兼容性，您可以使用此js脚本：http://jsfiddle.net/seler/32ECB/

Answer 2

@Haem;您可以申请:after财产

li:after{
    border-top:1px solid red;
    display:block;
    content:"";
    margin-top:-8px;
}

检查小提琴可能会对你有所帮助

http://jsfiddle.net/sandeep/NWbrR/4/

Answer 3

列表样式不能以这种方式设置样式 - 你必须删除li里面的列表样式标识符（a，b，c等）作为内容。

Answer 4

这是默认的浏览器行为，您无法查看列表提供的数字/字母。如果在您的情况下可以隐藏列表提供的编号并将其自己添加到列表文本内容中。

Answer 5

您可能需要自己处理编号 - 手动，服务器端或某些jQuery - 并使用这样的无序列表：

<style>
.Lower-Alpha
{
  margin-top: 2pt;
  margin-bottom: 2pt;
  text-decoration: line-through;
  list-style: none;
}
</style>

<ul>
   <li class="Lower-Alpha">a. Foo</li>
   <li class="Lower-Alpha">b. Bar</li>
</ul>

这将呈现为：

<击>一个。富

<击>湾杆

Answer 6

可以按照以下方式完成：

围绕<div>创建包装<ul>。
使用strikethru（或您希望列表项目编号的任何其他字体大小/样式）设置包装器<div>的样式
将<li>元素设置回常规字体设置。

然后，列表项编号将从父<div>中获取字体设置，并具有删除线，列表内容将为普通文本。

注意，只有当您希望所有列表项目编号的样式相同时，才能使用此功能。你的问题意味着这就是你想要的，但如果你只想对特定的列表项进行罢工，那么你需要使用@ seler的解决方案。

Answer 7

您无法设置列表项的样式。它可能看起来更好吗？

通过有序列表CSS / HTML中的数字敲击

7 个答案: