1

我知道我想要什么，但我不确定如何最好地表达它，所以请原谅。

我在我的页面中对标题以及标题后的段落进行了编号。我希望将段落的文本与标题标题的开头对齐，并且标题的数字向右对齐，例如标题标题的 0.5em。

这是等宽字体的示例：

    1. Introduction
       This is the beginning of the introduction.

  1.1. Sub header
       Another paragraph here and when it comes to having 
       another line, it is indented as the first one.

1.1.1. Sub-sub header
       Notice how the headlines and paragraphs are exactly
       aligned, whereas the numbers in the headlines are shifted
       to the right ?

  1.2. Sub header 2
       I'm sure you get the picture...

在 HTML/CSS 中实现这一目标的最佳方法是什么？使用表格将是微不足道的，但如果有更清洁的方法，我希望不这样做。

4

4 回答 4

6

我会这样做：

HTML：

<ul id="list">
    <li>
        <h2>Intro<em></em></h2>
        <p>This is the beginning of the introduction.</p>
    </li>
    <li>
        <h3>Sub header<em></em></h3>
        <p>Another paragraph here and when it comes to having 
            another line, it is indented as the first one.</p>
    </li>
    <li>
        <h4>Sub-sub header<em></em></h4>
        <p>Notice how the headlines and paragraphs are exactly
            aligned, whereas the numbers in the headlines are shifted
            to the right ?</p>
    </li>
    <li>
        <h3>Sub header 2<em></em></h3>
        <p>I'm sure you get the picture...</p>
    </li>
</ul>

CSS：

#list {
    counter-reset: level1 0 level2 0 level3 0;
    margin-left:50px;
}

#list h2,
#list h3,
#list h4 { margin-left:-50px; }

#list em { float:left; width:40px; padding-right:10px; text-align:right; }

#list h2 em:before {
    counter-increment: level1 1;
    content: counter(level1, decimal) ".";
}

#list h3 em:before {
    counter-increment: level2 1;
    content: counter(level1, decimal) "." counter(level2, decimal) ".";    
}

#list h4 em:before {
    counter-increment: level3 1;
    content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) ".";    
}

现场演示：http: //jsfiddle.net/9bkwQ/

请注意：

  1. HTML 元素上没有设置 CSS 类 - 没有必要这样做（结果：更清晰的代码）

  2. 编号是通过 CSS 计数器自动生成的，这意味着当您想在其他项目之间插入项目时，您不必更新编号。

于 2011-07-28T14:57:18.070 回答
1

我想您正在使用自定义数字？您自己将它们放在那里而不使用 ? 我会想象这样的系统。

无论哪种方式，我可能会设置一些 div 看起来像这样：

快速说明：您需要将 clear:both 添加到主容器中才能使它们很好地堆叠。

<div style="display:inline-block; width:100%; clear:both")
    <div style="float:left; margin-right:5px">
        1.
    </div>
    <div style="float:left">
        The first headline
    </div>
</div>

像这样的东西可以正常工作，您可以使用自己的样式来操纵结构/设计，但同样，我不知道这是否是绝对最好的方法。

于 2011-07-28T14:14:31.850 回答
1

在这里查看它的 JSFiddle：http: //jsfiddle.net/uvQsR/2/

<div class="section">
    <span class="number">1.1.</span>
    <h4 class="heading">Sub header</h4>
    <p> Another paragraph here and when it comes to having 
   another line, it is indented as the first one. </p>
</div>

用CSS

.section {
    padding-left:40px;
}
.number{
    text-align:right;
    margin-left:-40px;
    float:left;
    width:40px;
}
于 2011-07-28T14:15:37.197 回答
1

您可以这样做，根据需要调整宽度和边距（并取决于标题编号的深度/长度）

<h2 class="number">1.</h2><h2 class="text">Introduction</h2>
<p>This is the beginning of the introduction.</p>

<h2 class="number">1.1</h2><h2 class="text">Sub header</h2>
<p>Another paragraph here and when it comes to having<br /> 
       another line, it is indented as the first one.</p>

CSS

h2.number{display:inline-block; width:30px;}
h2.text{display:inline-block;}
p{margin-left:30px; margin-bottom:10px;}

http://jsfiddle.net/jasongennaro/VKP9Y/

于 2011-07-28T14:24:26.937 回答