我已升级到最新版本的Firefox,但这仍然存在。它在Chrome中运行良好。我的水平规则出现在它所属的页面底部附近,而我在Firefox的网页右侧出现了一条1024像素的线条。
HTML5:
hr {
height: 2px;
width: 1000px;
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 1024px;
}

<footer>
<p/>
<hr/>
<p style="text-align:center;"><a href="default.html">Home</a> | <a href="form.html">E-Mail Form</a> | Calendar |</p>
<br/>
</footer>
&#13;
我不知道造成这种情况的原因。谢谢
答案 0 :(得分:1)
您需要更清楚自己想要实现的目标,也请发布jsfiddles,以便我们可以使用或缩进您的代码。
hr {
height: 2px;
width: 1000px;
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 1024px;
}
&#13;
<footer>
<p/><!--(Not valid)-->
<hr/>
<p style="text-align:center;">
<a href="default.html">Home</a> | <a href="form.html">E-Mail Form</a> | Calendar |
</p>
<br/>
</footer>
&#13;
答案 1 :(得分:0)
我认为您不仅要设置精确的px
测量值,而且要么使用百分比单位,要么另外使用计算,这两种情况如下所示。这样,您可以通过进行以下更改来使代码响应更快,效率更高。
这可以在下面看到:
hr {
height: 2px;
width: calc(100%-24px);
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 100%;
color:red;
}
footer p{
text-align:center;
}
<footer>
<hr/>
<p><a href="default.html">Home</a> | <a href="form.html">E-Mail Form</a> | Calendar |
</p>
<br/>
</footer>