Html新手！背景图像问题

Question

我正在学习HTML，我想通过重新创建由Electronics Expo发送给我的发票来练习。

但是，我使用了background-image属性并通过repeat-x重复它，现在，背景在页面上延伸得太多，以至于它有一个水平条来拖动。

http://htmlpocketreference.110mb.com/index.html

你可以看到我在上面的链接中所做的事情。

另外，我非常感谢有关简化CSS编码的一些建议。它似乎非常混乱，一旦发生变化，我必须移动每个元素。 -.-

谢谢！

Answer 1

这是因为你有相对定位的元素没有固定的宽度 - 这些元素占据了父元素的宽度，即发票的宽度，并且伸出页面，导致溢出。给他们一个背景颜色，你可以很清楚地看到它：

给元素一个固定的宽度来解决这个问题，或者看看其他布局元素的方法，比如浮动它们。

---

除了这个问题，您还要重复id属性，即创建无效的HTML。您应该考虑使用class属性来共享相同样式的多个元素，或者更好的是，使用继承和级联来查看每个元素{{1 }}。

进一步阅读：

• CSS Positioning 101
• Inheritance and Cascade from The Web Standards Curriculum

Answer 2

问题不在于背景。问题是您在没有定义宽度的情况下给块级元素的相对位置......

h2元素，如（Ship To :)和（Phone）以及所有段落元素。你需要给这些元素一个特定的宽度，它将正常工作

尝试给这些元素一个背景颜色：黄色;看看文档中的流程（为了你的调试目的），你会看到我的意思