两个按钮标题无法并排显示的CSS布局问题如何解决

问题核心原因 #

两个元素的宽度各设置为75%，总宽度达150%，远大于父容器（默认body宽度为100%视口宽度），自然无法在同一行展示。此外还有两个细节错误也需要修正：p标签自带的默认外边距会额外占空间，可能引发宽度溢出；font-family属性的多字体分隔用了分号，语法错误会导致后续字体不生效。

解决方案1：调整原有float逻辑 #

修改后的CSS代码如下：

/* 清除p标签默认边距，避免额外占用宽度 */
p {
  margin: 0;
}
/* 公共样式抽离，减少冗余代码 */
.about, .shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  /* 修正font-family语法，多字体用逗号分隔 */
  font-family: fantasy, copperplate;
  /* 两个元素各占一半宽度，总宽度100%刚好放下 */
  width: 50%;
}
.about {
  float: left;
}
.shop {
  float: right;
}

解决方案2：更易维护的flex布局（更推荐） #

不用处理浮动清除等问题，代码更简洁：

/* 给父容器开启flex布局，子元素默认横向排列 */
body {
  display: flex;
}
p {
  margin: 0;
}
.about, .shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy, copperplate;
  /* flex:1代表两个元素平分父容器剩余宽度 */
  flex: 1;
}

以上两种方案都可以实现两个按钮并排展示的效果。

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