Question

我有一个网页的一部分，在页面周围显示一些单词。该部分应该占用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>

然而，即使每个单词都显示得很好，整个网页也会向左移动并按下按钮。每个单词的突出显示在最后一个字母后面向右移动数英里，我可以向右滚动到“空虚” “，我显然不想要。

Answer 1

我遇到了你的问题。我想说两件事。

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

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

标题为何如此宽泛

1 个答案: