Question

我想在HTML中呈现一些文本格式。这是一张图片：

Image of formatted text

注意带有子弹点和段落编号的灰线。子弹应该在页面上居中，数字应该是正确的。

我一直在考虑如何在HTML中执行此操作，并且空白。你会如何捕获这种格式？

Answer 1

您可以在此处使用:before和:after psuedo元素，效果很好：

这适用于所有现代浏览器和IE8 +。如果需要IE7支持，这个答案不适合你：）

#container {
    counter-reset: nums;
}
p {
    position: relative;
    margin: 21px 0;
}
p:before {
    content: '\2022 \2022';
    font-size: 2em;
    position: absolute;
    top: -8px;
    left: 0;
    line-height: 1px;
    color: #888;
    width: 100%;
    text-align: center
}
p:after {
    content: counter(nums);
    counter-increment: nums;
    font-size: 1.5em;
    position: absolute;
    top: -8px;
    right: 0;
    line-height: 1px;
    color: #888;
    font-family: sans-serif
}

关于counter属性：

无法（自动）增加项目符号。

然而，可以通过一些可疑的重复来完成：

http://jsfiddle.net/N4txk/1/

p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */

（或者，:nth-child可以以相同的方式重复：http://jsfiddle.net/N4txk/ - 但它在IE8中不起作用;只会有两个子弹）

明智的子弹数量有一个上限，所以我认为根据需要复制和粘贴它是可以接受的。

Answer 2

这样的事情怎么样？

http://jsfiddle.net/6eTCf/

<div class="separator">
   * <div class="page_number">1</div>
</div>


.separator{
    margin: 5px 0 5px 0;
    color:gray;
    position:relative;  
    text-align: center;
}

.page_number{
    position:absolute;
    right: 3px; 
    top: 0; 
}

Answer 3

我会将数字浮动并将剩余内容（子弹点）居中。如果您给剩余内容提供相等的左右边距大于数字宽，则内容将居中。

Answer 4

我会将整个事物包装在div中，然后在包装器和段落编号div之间使用相对/绝对定位来获得右侧的数字。

这是一个fiddle，展示了如何做到这一点。

Answer 5

我有几种方法可以想到：

浮动+绝对位置（我会让纯粹主义者解释这个）
旧样式表（我会解释这个，因为它是最容易的）：

如果该区域的总宽度为300px

<table><tr>
   <td width="30"></td>
   <td width="240" align="center">bullets</td>
   <td width="30" align="right">number</td>
</tr></table>

很多人更喜欢使用纯CSS，但我喜欢我的桌子，他们只是为我工作

Answer 6

我可以想到几种方式。

在段落之间添加<div>，然后添加两个<p>：<p class="dot"></p>和<p class="pnum">1</p>。

将<div>设置为段落的宽度，并在CSS中设置以下内容：

.dot{ text-align: center; }
.pnum{ float: right; }

你如何在HTML / CSS中做制表位

6 个答案: