2017-08-08 92 views
1

我正在为一个公司的Intranet网站重新创建一堆Word文档到网页。我试图找到一种更好的方法来简化格式化,而不是。 这是它目前看起来像在网页上: webpage image ,我需要它作为密切关注这个,因为我可以得到所有撑格式化每一行下方,而不是包装背面的号码下面的文字: word doc像Word一样格式化Doc

这里有一个小片断:

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

回答

1

力你的电话号码去左边,并作出BLO克里克你的内容。然后将你的清单'子弹与最后两条规则对齐。

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

+0

谢谢!那就是诀窍:) – xxdash

+0

我只是做了一个编辑来对齐列表的子弹。别客气 ! –