Question

我正在页面顶部的div框中创建一个标题为的网站。问题是，当我在框中放置标题时，它不会留在框中

<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
 Welcome To A Website
 </h1>
 </div>

Answer 1

您可以将h1的边距设置为0，同时请注意您应将样式放在某个CSS文件中或页面内（<style>标记之间）：

div {
  width:1000px;
  height:40px;
  background:grey;
  border:3px solid;
  border-radius:10px;
  opacity:0.85;
  overflow:hidden;
  line-height:40px;
}
div h1 {
  margin:0;
}

Working demo.

Answer 2

因为您为样式中的框指定了特定高度。尝试删除“身高：40px;”部分。现在div风格看起来像这样：

style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;"

Fiddle

Answer 3

看起来标题大小的高度对于您在div上设置的高度来说太大了。尝试从div的风格中取出高度，如下：

<div style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
 Welcome To A Website
</h1>
</div>

Answer 4

创建HTML文件时，每个浏览器都会解释其中的元素。例如：某些浏览器在<p>或某些不同的行高属性上有额外的边距配置。因此，通常，开发人员使用重置CSS （例如：http://meyerweb.com/eric/tools/css/reset/）。它可以减少浏览器在默认行高，边距和标题字体大小等方面的不一致性。

在您的情况下，h1默认情况下会有一些配置，使其超出div框（我检查时的边距和填充）。您可以使用：margin：0来解决它;填充：0;在<h1>元素。我对未来项目的建议：使用重置CSS，你可以更好地掌控这些。

另一个建议：使用CSS文件来组织自己的样式。当您修改常见内容并且必须逐个文件执行此操作时，内联样式并不是一件好事。使用CSS，您只需更改文件，它就会反映使用它的所有HTML。

好吧，我的CSS修复建议是：

HTML：

<div>
    <h1>Welcome to a Website </h1>
</div>

CSS：

div {
    /* Make title go to entire screen*/
    width: 100%;
    display: block;

    /* You visual config */
    height:40px;
    background:grey;
    border:3px solid;
    border-radius:10px;
    opacity:0.85;
    overflow:hidden;
    line-height:40px;
}

div h1 {
    margin: 0;
    padding: 0;
    text-align:center;
}

我使用宽度：100％;显示：块而不是宽度：1000px因为我假设你想要一个占据屏幕宽度100％的块。工作演示：http://jsfiddle.net/brunoluiz/NyLAD/

嗯，祝你好运HTML和CSS研究！

初学者问题是<div> </div>

4 个答案: