如何将<hr>元素下移至地址与二维码之间？

我来帮你搞定这个<hr>位置的问题！看了你的代码，发现几个可能导致你调整没效果的点，咱们一步步来改：

问题分析 #

你现在的<hr>被包裹在一个和它背景色完全相同（#ac1f23）的<div>里，这等于把<hr>的视觉效果给“淹没”了，就算调整margin/padding，你也很难看到变化；另外，父容器设置了固定高度height:160px，也会限制<hr>的位置调整空间。而且当前<hr>的位置还在地址信息所在的容器内，自然没法跑到地址和二维码之间。

解决方案 #

咱们做这几个调整：

• 把<hr>从那个同色div里移出来，放在地址信息容器和二维码容器之间
• 给<hr>设置明确的上下外边距，精准控制它的位置
• 去掉多余的同色背景div，让<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;"></span></strong></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>
    <!-- 把hr移到这里，放在地址容器和二维码容器之间 -->
    <hr style="height: 2px; border: none; background-color: #ac1f23; width: 450px; margin: 10px auto;"/>
    <div style="text-align: center; height: 90px; margin-top: 10px; border: 0px solid purple; vertical-align: middle;">&nbsp;</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] -&nbsp;</span><span style="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> 
  </div>
</td>

关键调整说明 #

1. 移出<hr>：把<hr>从原来的背景div中取出，放在地址容器（height:160px的div）和二维码容器之间，这样它自然就处于地址和二维码的中间区域。
2. 设置<hr>样式：给<hr>加上width:450px和margin:10px auto，既保证宽度和之前一致，又让它水平居中，上下的margin可以根据你的需求调整（比如改成margin:15px auto让它离地址和二维码更远一点）。
3. 移除多余容器：删掉了那个和<hr>同色的背景div，因为现在<hr>本身的颜色已经足够明显，不需要额外背景来衬托。

这样调整后，你就能看到<hr>精准地落在地址信息和二维码之间了，要是还需要微调位置，直接修改<hr>的margin-top和margin-bottom数值就行~

内容的提问来源于stack exchange，提问作者Alin Ungureanu