html - 像 Word 文档一样格式化

Question

我正在将一堆 Word 文档重新创建到公司内联网网站的网页中。我正在尝试找到一种更好的方法来简化格式，而不是什么。这是它目前在网页上的样子: 而且我需要它看起来尽可能接近这个，因为我可以得到文本在每行下面的所有格式，而不是在数字下面回绕:

这是一个小片段:

.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

强制您的号码位于左侧并挡住您的内容。然后将列表的元素符号与最后两条规则对齐。

.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>