如何仅通过CSS修改实现多个文本框横向排列在同一行

无法横向排列的核心原因 #

1. <p> 是默认的块级元素，自带 display: block 属性，默认会独占整行，哪怕设置了宽度也不会和其他块级元素并排展示。
2. 默认CSS盒模型为 content-box，你设置的 width: 30% 仅统计内容区域宽度，额外加的 padding:10px、border:2px solid 会叠加在宽度之外，三个元素总宽度为 3*30% + 3*(20px + 4px) = 90% + 72px，已经超过视口总宽度，就算修改了display属性也会触发换行。
3. 额外提示：你HTML里第一个#aText的闭合标签误写为</pre>，建议修正为</p>避免潜在的渲染异常。

可行解决方案（无需修改HTML结构） #

方案1：使用Flex布局（最简便，兼容性好）

直接给三个p元素的父容器（即body）添加flex布局属性即可：

body {
  /* 开启flex布局，子元素默认横向排列 */
  display: flex;
  /* 三个元素总宽度90%，剩余10%作为均匀分布的间隙 */
  justify-content: space-between;
  /* 避免子元素被默认拉伸为统一高度 */
  align-items: flex-start;
  /* 可选：屏幕宽度过窄时自动换行，避免内容溢出 */
  flex-wrap: wrap;
}

方案2：使用inline-block实现

修改三个文本框的公共属性，同时处理行内块的默认间隙问题：

/* 合并三个元素的公共样式，避免重复代码 */
#aText, #bText, #cText {
  /* 改为行内块元素，支持设置宽高且可横向排列 */
  display: inline-block;
  /* 盒模型改为border-box，width数值包含padding、border，30%就是元素总宽度 */
  box-sizing: border-box;
  /* 清除p标签默认自带的外边距 */
  margin: 0;
  /* 顶部对齐，避免因为内容高度不一致出现错位 */
  vertical-align: top;
}

body {
  /* 消除行内块元素之间默认的空白字符间隙 */
  font-size: 0;
}

两种方案任选其一即可实现三个文本框横向排列的效果。

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