如何将HTML有序列表中的文本居中但数字标签不居中

Question

我正在为一个反向列出步骤的页面创建一个小部件。我计划使用ol元素，并在单个li标签上设置value属性以强制ol的编号反转。到目前为止，一切都很好。

然而，我遇到了一个设计难题，我不确定是否可以用 CSS 解决。

在这个标记下，是否可能使文本居中但标签仍然左对齐？

<ol>
    <li value="5">item 5</li>
    <li value="4">item 4</li>
    <li value="3">item 3</li>
    <li value="2">item 2</li>
    <li value="1">item 1</li>
</ol>

这里有一张图片，用来说明我需要的文本处理方式。

如果我不得不在我的标记中添加额外的span来实现OL自动完成的功能，那将是一件遗憾的事情。

- DingoEatingFuzz

Answer 1

你可以翻转计数器，然后将计数器与文本分开对齐。尽管在IE7上不行，但使用默认值时它会回归默认状态（通过内置IE hack）。

CSS：

ol {
    padding: 0;
    margin: 0;
    list-style-type: decimal !ie7;
    margin-left: 20px !ie7;
    counter-reset:item 6; /* one higher than you need */
    width: 250px;
    border: 1px solid #000;
}
ol > li {
    counter-increment:item -1;
    text-align: center;
}
ol > li:before {
    content:counter(item) ". ";
    float: left;
    width: 30px; background: #eee;
}

HTML（超文本标记语言）

<ol>
    <li value="5">item 5</li>
    <li value="4">item 4</li>
    <li value="3">item 3</li>
    <li value="2">item 2</li>
    <li value="1">item 1</li>
</ol>

- clairesuzy

---

太棒了！我不知道可以使用counter(item)来获取内容属性，所以在应该使用:before之前就忽略了它。谢谢你的分享。 - DingoEatingFuzz

@DingoEatingFuzz，不客气 - 是的，现在我们门口的东西非常酷，但是找到所有东西才是问题 ;) - clairesuzy

Answer 2

你需要额外的元素 - 列表中的数字被视为布局目的的一部分，就像这样。添加一个内部 span 设置为 display:inline-block 应该可以解决问题。

在设计方面，值得指出的是，多行居中对齐的文本非常难以扫描，因为文本的起始点（左边缘）从一行到另一行不同。如果有一个一致的、大的文本缩进，是否也适合您？这肯定更易读。

顺便说一下，你知道 HTML5 在 OL 上包括了“reversed”属性吗？当然，对于旧浏览器，你仍然需要你的 value 属性。

- Ben Hull

---

我知道reversed属性（截至今天）但是当我在firebug中测试它（使用FF4）时，它没有起作用，所以我还在观望。至于使用text-indent，我的担心是可能会有太多文本在项目中，因此缩进不起作用。无论是缩进还是居中，我都处于不稳定的地位。很可能我最终将不得不重新设计它以允许多行标签。感谢您的建议！ - DingoEatingFuzz

哇 - 我以为FF4肯定支持它。好知道 - 谢谢！ - Ben Hull

Answer 3

li{ list-style:none; text-align:center; }
li:before{ content:attr(value); float:left; }

- n1kkou

Answer 4

我不确定“shoving extra spans”是什么意思，但这个方法可以解决：

CSS:

li {text-align:center; margin-bottom:4px;}
#list {display:block;width:300px;background:#ddd;text-align:center;}

HTML

<ol>
<li><div id="list">This is item four</div></li>
<li><div id="list">This is item three</div></li>
<li><div id="list">This is item two</div></li>
<li><div id="list">This is item one</div></li>
</ol>

- pac

---

这正是我所说的塞入额外的span（除了你用的是div）。另外，标签ID应该是唯一的。不过还是谢谢。 - DingoEatingFuzz