Question

我有一个问题，从<hr>向下移动一点点。我希望它介于地址和QR码之间。我尝试过添加边框，填充，边距。

<td style="padding-left: 0px;">
<div style="align: center; margin: 3px; border: 0px solid blue; width: 480px; height: 380px; float: left; text-align: center;">
<div style="text-align: center; margin-top: 10px; border: 0px solid black; height: 135px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2;"></div>
<div style="text-align: center; margin-top: 0px; border: 0px solid black; height: 160px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2; margin-bottom: 30px; color: #ac1f23;">[Persons.First_Name]<br /><span style="font-size: 35pt; font-family: 'Fjalla One'; color: #ac1f23;">[Persons.Family_Name]</span></span></strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><br />[Persons.Company]</span><br /><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt; padding-bottom: 10px;">[Persons.City], [Persons.Address_3]</span></span><br />
<div style="background-color: #ac1f23; width: 450px; margin-left: 15px; margin-right: 5px;"><hr style="height: 2px; border: none; background-color: #ac1f23; align: center;" /></div>
</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;">&#160;</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt;">[General.QRCode-PersonId][General.Barcode-PersonId]</span></div>
<div style="text-align: center; height: 80px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-size: 10pt;"><span style="font-family: 'Fjalla One'; sans-serif; margin-top: 10px;">[ActivityPerPerson.Start] - [ActivityPerPerson.Activity_Name_2] -&#160;</span><span style="font-family: font-family: 'Fjalla One';">[ActivityPerPerson.End]</span><span style="font-family: 'Fjalla One';"><img src="abc" alt="" /></span></span><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt; padding-bottom: 10px;"><br /><img src="[Categories.Category_Caption_For_Badge]" alt="LPS_Chef_BADGE" width="450" /></span></div>

Answer 1

您可以使用以下内容将margin-top添加到该行（div）的父元素（<hr>）。您还可以将margin-top设置为<hr>元素，以便在该行之前获得一些空格：

<td style="padding-left: 0px;">
<div style="align: center; margin: 3px; border: 0px solid blue; width: 480px; height: 380px; float: left; text-align: center;">
<div style="text-align: center; margin-top: 10px; border: 0px solid black; height: 135px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2;"></div>
<div style="text-align: center; margin-top: 0px; border: 0px solid black; height: 160px;"><strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 35pt; line-height: 1.2; margin-bottom: 30px; color: #ac1f23;">[Persons.First_Name]<br /><span style="font-size: 35pt; font-family: 'Fjalla One'; color: #ac1f23;">[Persons.Family_Name]</span></span></strong><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><br />[Persons.Company]</span><br /><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 19pt; padding-bottom: 10px;">[Persons.City], [Persons.Address_3]</span></span><br />
<div style="background-color: #ac1f23; width: 450px; margin-left: 15px; margin-right: 5px;margin-top:50px;"><hr style="height: 2px; border: none; background-color: #ac1f23; align: center;" /></div>
</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;">&#160;</div>
<div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt;">[General.QRCode-PersonId][General.Barcode-PersonId]</span></div>
<div style="text-align: center; height: 80px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;"><span style="font-size: 10pt;"><span style="font-family: 'Fjalla One'; sans-serif; margin-top: 10px;">[ActivityPerPerson.Start] - [ActivityPerPerson.Activity_Name_2] -&#160;</span><span style="font-family: font-family: 'Fjalla One';">[ActivityPerPerson.End]</span><span style="font-family: 'Fjalla One';"><img src="abc" alt="" /></span></span><span style="font-family: 'Fjalla One'; sans-serif; font-size: 20pt; padding-bottom: 10px;"><br /><img src="[Categories.Category_Caption_For_Badge]" alt="LPS_Chef_BADGE" width="450" /></span></div>

注意：不要像这样使用内联CSS！这很难读。在外部CSS文件或.classname之间使用CSS类（#idname）或ids（<style>）（但文件更好）。

向下移动线

1 个答案: