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

Question

我有一个HTML有序列表，我需要应用删除线。 我在CSS中做了这个，如下所示：

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

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

我得到了：a。 突破内容

但我需要： a。 突破内容

欢迎任何建议。 干杯

Answer 1

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

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

编辑：它看起来像是依赖于浏览器的行为。 在mozilla它呈现好。

edit2：为了完整的浏览器兼容性你可以使用这个js脚本： http ： //jsfiddle.net/seler/32ECB/

Answer 2

@Haem; 您可以申请:after财产: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

它可以如下完成：

1. 在<ul>周围创建一个包装器<div> <ul> 。

2. 使用strikethru（或者您希望列表项目编号的任何其他字体大小/样式）设置包装器<div>的样式

3. 将<li>元素设置回常规字体设置。

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

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

Answer 7

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