Question

我想制作一个标题，该标题的标题位于“资源”的中心，另一个标题为“ HTML”，右边的标题为“ CSS”，但是我无法对齐它们以将其放置在正确的位置，然后添加边框-right和border-left将标题从标题到中心分开。

目前我有这个：

header {
  border: 2px solid white;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}

h1 {
  display: inline-block;
  font-size: 30px;
  font-family: Arial, sans-serif;
}

h1.html {
  padding-left: 2%;
}

h1.res {}

h1.css {
  padding-right: 2%;
}

<header>
  <h1 class="html">HTML</h1>
  <h1 class="res">Ressources</h1>
  <h1 class="css">CSS</h1>
</header>

由于显示：inline-block;效果更好，但我不知道该怎么做。

Answer 1

将<h1>标记替换为<span>元素会更简单，因为默认情况下它们是inline。左右分离可以通过几种方式完成。参见下面的示例。

.header {
  text-align: center;
  border-radius: 20px;
  background-color: rgba(0,0,0,0.2);
  color:white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-size: 24px;
}

.header span:nth-child(1) {
  float: left;
  width: 33%;
  border-right: 2px solid white;
}

.header span:nth-child(3) {
  float: right;
  width: 33%;
  border-left: 2px solid white;
}

<div class='header'>
  <span>HTML</span>
  <span>RESOURCES</span>
  <span>CSS</span>
</div>

Answer 2

您可以使用弹性布局来放置标题。将此添加到您现有的header规则集中：

header {
  display: flex;
  justify-content: space-between;
}

如何对齐多个<h1>标签

2 个答案: