Word Docのような書式設定

Question

私は会社のイントラネットWebサイトのWordページをウェブページに再作成しています。私は書式を合理化するためのより良い方法を見つけようとしています。 これは、現在のWebページ上のようになります。 そして私は私が得ることができるとして、それはこれにように密接に見る必要があるところすべてがかなりの数の下に戻ってラップするよりも、各ラインの下にフォーマットされたままのテキスト：

ここ

は小さな抜粋です：

.secthead { 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    padding-bottom: 5px; 
 
    padding-top: 15px; 
 
    text-decoration: underline; 
 
    padding-left: 25px; 
 
} 
 

 
dt { 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    padding-bottom: 5px; 
 
    padding-top: 15px; 
 
} 
 

 
dd { 
 
    padding: 5px 5px 5px 15px; 
 
} 
 

 
.sub { 
 
    padding-left: 10px; 
 
} 
 

 
.def { 
 
    padding-left: 50px; 
 
}

<dl> 
 
    <dt>6.0 <span class="secthead">PROCEDURE:</span></dt> 
 
    <dd><span class="sub">6.4</span><span class="def">General tasks carried out by personnel involved primarily in Payroll functions are addressed in the Miscellaneous Payroll Functions Work Instruction. Typical functions addressed in this work instruction are as follows: 
 
    <ul> 
 
    <li>Employment Verifications </li> 
 
    <li>New Hire reporting</li> 
 
    <li>Payroll Bank Reconciliations</li> 
 
    </ul> 
 
    </span></dd> 
 
</dl>

Answer 1

は、左側に行くとBLOを作るためにあなたの番号を強制しますあなたのコンテンツのck。次にリストの箇条書きを最後の2つのルールに合わせます。

.secthead { 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    padding-bottom: 5px; 
 
    padding-top: 15px; 
 
    text-decoration: underline; 
 
    padding-left: 25px; 
 
} 
 

 
dt { 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    padding-bottom: 5px; 
 
    padding-top: 15px; 
 
} 
 

 
dd { 
 
    padding: 5px 5px 5px 0px; 
 
    margin: 0px 
 
} 
 

 
.sub { 
 
    float: left; 
 
} 
 

 
.def { 
 
    padding-left: 50px; 
 
    display: block; 
 
} 
 

 
ul { 
 
    padding-left:0; 
 
} 
 
ul li { 
 
    list-style-position:inside 
 
}

<dl> 
 
    <dt>6.0 <span class="secthead">PROCEDURE:</span></dt> 
 
    <dd><span class="sub">6.4</span><span class="def">General tasks carried out by personnel involved primarily in Payroll functions are addressed in the Miscellaneous Payroll Functions Work Instruction. Typical functions addressed in this work instruction are as follows: 
 
    <ul> 
 
    <li>Employment Verifications </li> 
 
    <li>New Hire reporting</li> 
 
    <li>Payroll Bank Reconciliations</li> 
 
    </ul> 
 
    </span></dd> 
 
</dl>