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 に答える