为什么 headers 这么宽

Question

我有一个网页的一部分，它在页面周围显示了一些文字。此部分应该占 window space 的 100%。这是代码：

<div id = "page" style="height: 100%; width: 100%; background-color:black;">
    <header class = "words" style = "color:white; position: relative; height: 100%; width: 100%;">
        <h1 id = "cool" style = "position: relative; top: 20.62%; left: 11.55%;">ASSURED</h1>
        <h1 id = "nice" style = "position: relative; top: 39.18%; left: 31.61%;">ENIGMATIC</h1>
        <h1 id = "smart" style = "position: relative; top: 50.52%; left: 64.44%;">INTELLIGENT</h1>
        <h1 id = "intelligent" style = "position: relative; top: 67.53%; left: 48.63%;">SOPHISTICATED</h1>
        <h1 id = "peace" style = "position: relative; top: 77.32%; left: 20.67%;">CALM</h1>
    </header>    
</div>

然而，即使每个单词都显示正常，整个网页都向左移动并按下 ctrl A，每个单词的突出显示都比最后一个字母向右移动了数英里，我可以向右滚动到"emptiness"，我显然不想要。

Answer 1

我知道你的问题了。我想说两件事。

坦率地说，不推荐您编写代码的方式。这不是正确的书写方式。你应该使用 css 类。（内联 css 不是一个好习惯）
回到您的问题，因为您没有为这些 <h1> 块元素设置任何宽度，它正在使用自己的宽度或整个块来显示项目。在你使用 width（在你的情况下宽度有效）和 floats/inline-block 之前，你会遇到这种问题。

参考：http://learnlayout.com/position.html

为什么 headers 这么宽

Why are headers so wide

html

css

position

web