无法阻止html / css中的自动行间距 tags

问题描述 投票：-3回答：1

使用我的标签，我试图阻止它自动创建一个行空间。

<h1>Title</h1>

这是我目前的css规则。

h1
{
    font-family: Blackadder ITC;
    text-align: left;
}

在我的身体规则中，我有这个

body
{
    text-align: center;
}

当我将此添加到我的css h1规则

display: inline;

它确实阻止h1标签自动创建行空间，但它会覆盖：

text-align: left;

规则，因此文本居中在页面中间，我不希望这样。

有没有办法让文本进入页面的左侧，以及防止它创建自动行间距？

html css
1个回答
0
投票

您可以继续删除<h1>上的边距。

body {
  text-align: center;
  margin: auto 0;
}

nav {
  position: relative;
}

h1 {
  font-family: Blackadder ITC;
  text-align: left;
  margin: 0;
}

.button {
  position: absolute;
  top: 0;
  right: 50%;
  border-width: thin;
  border-style: groove;
  border-color: alpha;
  margin: 3px 0;
}
.paragraph {
  background-color: blue;
  padding: 10px;
  color: white;
  font-family: calibri;
  font-size: 30px;
}
<!DOCTYPE html>

<html>

<head>
  <title>Website Title</title>

  <link href="Main.css" rel="stylesheet" type="text/css">

</head>

<body>
  <nav>
    <h1>Title</h1>
    <a href="#" class="button">Button 1</a>
  </nav>

  <br/>

  <div class="paragraph">
    <h2>Title</h2>
    <p>
      Information
    </p>
  </div>




</body>

</html>

编辑：我之前给出了解决方案，以减少h1元素上的行间距（这是两行之间的空间）。我想你想要同一条线上的h1和按钮，问题中并不清楚。 要将两个元素放在同一行中，您可以使用定位（就像我上面所做的那样），或者在将h1的显示设置为inline之后使用浮点数。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.