9

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

格式化文本的图像

请注意带有项目符号点和段落编号的灰线。项目符号应位于页面中央，数字应正确对齐。

我一直在想如何在 HTML 中做到这一点，但我一无所获。你将如何捕捉这种格式？

4

6 回答 6

15

您可以在此处使用:before和:afterpsuedo-elements 来产生很好的效果：

http://jsfiddle.net/yNnv4/1/

这适用于所有现代浏览器和 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 中不起作用；只会有两个项目符号）

合理的子弹数量是有上限的，所以我认为可以根据需要复制和粘贴多次。

于 2011-06-24T19:53:55.850 回答
5

这样的事情怎么样？

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; 
}
于 2011-06-24T19:55:24.523 回答
1

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

这是一个小提琴，展示了如何做到这一点。

于 2011-06-24T19:56:36.413 回答
1

我会将数字向右浮动并将剩余内容（项目符号）居中。如果你给剩余的内容一个相等的左右边距，大于数字的宽度，内容将居中。

于 2011-06-24T19:53:18.860 回答
0

我能想到几种方法。

在段落之间添加一个<div>，然后添加两个<p>'s:<p class="dot"></p>和<p class="pnum">1</p>.

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

.dot{ text-align: center; }
.pnum{ float: right; }
于 2011-06-24T19:57:03.323 回答
0

我可以想到几种方法：

  • 浮点+绝对位置（我会让纯粹主义者解释这个）
  • 旧式表（我会解释这一点，因为它是最简单的）：

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

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

许多人更喜欢使用纯 CSS，但我喜欢我的表格，它们只为我工作

于 2011-06-24T19:53:25.193 回答