如何让自定义模态框内错误提示不换行，图标与文本同行？

问题根源在于<h3>是块级元素，默认会独占一行，再加上custom-icon如果也是块级元素，自然会导致两者换行显示。以下是具体修复方案：

1. 修改.form-error-message样式，启用弹性布局 #

给错误提示容器添加弹性布局，让内部元素横向排列，同时垂直居中对齐：

.form-error-message {
  height: 2rem;
  border: solid 1px;
  padding: 1.5rem; /* 补上原代码缺失的分号 */
  font-weight: 700;
  display: flex; /* 关键：开启弹性布局 */
  align-items: center; /* 让图标和文本垂直居中 */
  gap: 0.5rem; /* 图标与文本之间添加间距，可选 */
}

2. 调整<h3>的默认样式 #

<h3>自带上下外边距，且默认是块级元素，需要去掉外边距避免布局错乱：

.form-error-message h3 {
  margin: 0; /* 清除默认外边距 */
  flex: 1; /* 可选：让文本占据剩余空间，超长时自动换行但仍与图标同行 */
}

3. 提高样式优先级（针对无法控制的custom-modal） #

如果原有样式优先级较高，可以通过更具体的选择器确保修改生效：

#checkbox-modal .form-error-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#checkbox-modal .form-error-message h3 {
  margin: 0;
}

这样修改后，错误图标和文本就能在同一行显示了。

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