如何实现多个HTML元素在网页同一行内并排显示

你当前代码无法同行的核心原因有两个：

1. 代码里的<p>标签是块级元素，默认display: block规则下会独占一整行
2. <input>属于自闭合元素，不需要额外写</input>闭合标签，属于冗余代码可以删掉。

下面是几种可直接落地的实现方案，优先推荐第一种： #

方案1：Flex弹性布局（首选，适配性强、布局灵活） #

给这四个元素外层套一个父容器，给父容器设置flex属性即可，还能轻松控制元素对齐、间距，不会出现奇怪的空白间隙问题。
首先调整HTML结构：

<!-- 外层父容器 -->
<div class="tz-radio-group">
  <input checked type="radio" name="TZ" id="local-time">
  <p id="inp-n1" class="disp">Local Time</p>
  <input type="radio" name="TZ" id="eastern-time">
  <p id="inp-n2" class="disp">Eastern Time</p>
</div>

添加对应CSS代码：

.tz-radio-group {
  display: flex;
  /* 控制单选框和文字垂直居中对齐，避免高低错位 */
  align-items: center;
  /* 控制四个元素之间的间距，可按需调整数值 */
  gap: 8px;
}
/* 清除p标签默认的上下外边距，避免布局偏移 */
.tz-radio-group .disp {
  margin: 0;
}

方案2：修改元素display属性（无需新增父容器） #

如果不想额外加父标签，可以直接把块级的p标签改成行内块属性，让元素按照行内规则排列：

input[name="TZ"], .disp {
  display: inline-block;
  /* 设置垂直居中对齐 */
  vertical-align: middle;
}
.disp {
  /* 清除p默认外边距 */
  margin: 0;
  /* 给两个时区选项之间加间隔，避免挤在一起 */
  margin-right: 20px;
}

注意：这种方案下，HTML标签之间的换行符会被解析成一个空白字符，可能导致元素之间出现预期外的间隙，如果对间距精度要求高，还是优先用flex方案。

额外优化建议 #

单选框的语义化标准写法是用<label>标签关联对应input，这样点击文字区域也能选中单选框，交互体验更好，推荐写法如下：

<div class="tz-radio-group">
  <label class="tz-option">
    <input checked type="radio" name="TZ" id="local-time">
    <span>Local Time</span>
  </label>
  <label class="tz-option">
    <input type="radio" name="TZ" id="eastern-time">
    <span>Eastern Time</span>
  </label>
</div>

对应CSS：

.tz-radio-group {
  display: flex;
  gap: 24px;
}
.tz-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

这种写法不需要额外处理p标签的默认样式，结构更清晰，交互也更符合用户使用习惯。

内容的提问来源于stack exchange，提问作者displayName is undefined