Question

我为一个正在做的网站创建了一个标题，但是单词不会留在其中，它们会低于它。请帮忙。下面是代码：

＆＃13;

#headerclasshomenofix{
	background-color:white;
	width:100%;
	height:40px;
	left:0px;
	top:0px;
	position:absolute;
	font-family:"AR CENA";
	border-bottom:thick gray solid;
}

＆＃13;

<div id="headerclasshomenofix">
		<h1><i>Music School</i></h1>
</div>

＆＃13;

了解＆＃34; Music School＆＃34;话语浮起来......我不知道自己做错了什么。

Answer 1

您的元素太小，无法适应这种字体大小。我假设你想保持位置：绝对。做其中一个：

reduce font-size
删除或增加height（60px对我来说没问题）

Answer 2

默认情况下，h1等许多代码在Chrome上的 h1 等某些属性上都有默认值：

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

因此，您只需重置默认margin

即可

#headerclasshomenofix {
  background-color: white;
  width: 100%;
  height: 40px;
  left: 0px;
  top: 0px;
  position: absolute;
  font-family: "AR CENA";
  border-bottom: thick gray solid;
}
h1 {
  margin: 0
}

<div id="headerclasshomenofix" style="left: 0px; top: 0px">
  <h1><i>Music School</i></h1>
</div>

Answer 3

从#hearderclasshomenofix

中删除绝对css位置

＆＃13;

#headerclasshomenofix{
	background-color:white;
	width:100%;
	height:40px;
	left:0px;
	top:0px;
	font-family:"AR CENA";
	border-bottom:thick gray solid;
}

＆＃13;

<div id="headerclasshomenofix" style="left: 0px; top: 0px">
		<h1><i>Music School</i></h1>
</div>

＆＃13;

Answer 4

我不完全确定，问题是什么？如果它是单词/ css在页面上的显示方式 - 您可以更改 position absolute至position static

此外，您可能希望保持与像素的高度一致，宽度以百分比表示。

如果你的意思是实际的元素，在代码中，代码看起来很好吗？ H1和标签应该在你的div里面吗？

Answer 5

只需设置h1{margin:0;padding:0;}

＆＃13;

#headerclasshomenofix{

	background-color:white;
	width:100%;
	height:40px;
	left:0px;
	top:0px;
	position:absolute;
	font-family:"AR CENA";
	border-bottom:thick gray solid;
}
h1{margin:0;padding:0;}

＆＃13;

<div id="headerclasshomenofix" style="left: 0px; top: 0px">
		<h1><i>Music School</i></h1>
</div>

＆＃13;

为什么我的话语不在我的div内

5 个答案: