HTML新手！ 背景图像问题

Question

我正在学习HTML，我想通过重新创建电子博览会发送给我的发票进行练习。

但是，我使用了background-image属性，并通过repeat-x对其进行了重复，现在，背景在页面上的伸展程度如此之大，以至于需要拖动水平条。

http://htmlpocketreference.11​​0mb.com/index.html

您可以在上面的链接中看到我的操作。

另外，我非常感谢您提供一些有关简化CSS编码的建议。 看起来确实很乱，一旦发生变化，我必须移动每个元素。 -.-

谢谢！

Answer 1

这是因为您具有相对定位的元素，但没有固定的宽度-这些元素采用其父元素的宽度（即发票的宽度），并伸出页面，从而导致溢出。 给他们一个背景色，您可以很清楚地看到：

为元素提供固定的宽度以解决此问题，或者使用其他布局元素的方法，例如浮动它们。

---

除此问题外，您还重复了id属性，这将创建无效的HTML。 您应该考虑将class属性用于具有相同样式的多个元素，甚至更好的方法是考虑使用继承和级联，而不必为每个元素都指定一个id 。

进一步阅读：

• CSS定位101
• Web标准课程的继承与层叠

Answer 2

问题不是背景。 问题是您要赋予块级元素的相对位置而不定义其宽度...

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

尝试为这些元素设置背景色：黄色； 看看文档内部的流程（出于调试目的），您将明白我的意思