h1与p1无法实现inline显示的问题排查求助

嘿，我看你折腾了好几种方法想让h1和p1行内显示却没成功，咱们来揪出问题所在并搞定它～

问题根源 #

你给p1设置了float: right，这个属性会让元素脱离正常的文档流——哪怕你给h1和p1都加了display: inline，float也会破坏它们的行内布局关系，导致没法在同一行对齐。

推荐解决方案：用Flexbox布局（现代且灵活） #

Flexbox是目前处理这类布局最省心的方式，只需要修改.header的样式，再调整几个细节就能实现你要的效果：

修改后的完整CSS代码

body {
  font-family: "calibri light";
  background-image: url(img/background.jpg);
  margin: 0; /* 移除body默认边距，避免布局偏移 */
}

br {
  margin-top: 0px;
}

.header {
  display: flex;
  justify-content: space-between; /* 让左侧h1/h2和右侧p1分别贴左右边 */
  align-items: center; /* 垂直方向居中对齐所有元素 */
  padding: 10px 20px; /* 加内边距，避免内容贴紧屏幕边缘 */
}

h1 {
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 7px;
  font-weight: 100;
  margin: 0; /* 移除h1默认上下边距，避免垂直间距混乱 */
}

h2 {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 100;
  margin: 5px 0 0 0; /* 只保留上边距，让h2和h1紧凑排列 */
}

p1 {
  color: #ffffff;
  letter-spacing: 2px;
  font-size: 20px;
  text-align: right; /* 如果p1有多行内容，保持右对齐 */
}

额外小建议

HTML里的<p1>不是标准HTML标签，浏览器虽然能识别，但建议换成标准的<p>或者<span>，这样兼容性更好，也符合规范。

为什么这个方案有效？ #

Flexbox会把.header变成一个弹性容器，里面的子元素（左侧的h1/h2组合、右侧的p1）会自动在同一行排列。justify-content: space-between负责把左右元素分别推到容器的两端，align-items: center确保所有元素在垂直方向上居中对齐，完美解决了你要的行内显示需求，同时避开了float带来的布局问题。

内容的提问来源于stack exchange，提问作者LiaamB