移动端Grid布局中文字需置于Input上方的适配问题

我制作了一个包含input的简单Grid布局，PC端显示正常，但在移动端下，当文本内容较长时，input会处于文字下方；而当文本为短内容（如“Lor”）时，input会与文字并排显示。需要实现文字始终位于input上方，保持统一的布局结构。

解决方案 #

核心思路是打破文本与input的行内布局，通过结构调整+CSS强制垂直排列，确保无论文本长短，input都固定在文字下方。

1. 调整HTML结构 #

将每个<p>内的文本与input拆分为独立元素（用<span>包裹文本，方便样式控制），避免行内元素的自动换行行为：

<div class="container">
  <div class="one">
    <h4>Heading</h4>
    <p>
      <span>Lorem ipsum lorem ipsum</span>
      <input type="text" value="[[Lorem]]">
    </p>
    <p>
      <span>Lorem ipsum lorem ipsum</span>
      <input type="text" value="[[Lorem]]">
    </p>
    <p>
      <span>Lor</span>
      <input type="text" value="[[Lorem]]">
    </p>
  </div>
  <div class="two"></div>
  <div class="one">
    <h4>Heading</h4>
    <p>
      <span>Lorem ipsum lorem ipsum</span>
      <input type="text" value="[[Lorem]]">
    </p>
    <p>
      <span>Lorem ipsum lorem ipsum</span>
      <input type="text" value="[[Lorem]]">
    </p>
    <p>
      <span>Lor</span>
      <input type="text" value="[[Lorem]]">
    </p>
  </div>
  <div class="two"></div>
</div>

2. 修改CSS样式 #

通过Flex布局强制<p>内的元素垂直排列，同时适配PC和移动端的对齐需求：

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 1100px;
  max-width: 100%;
  height: 200px;
  margin: 0 auto;
}

input {
  border: none;
  border-bottom: 1px solid #000;
  width: 250px;
}
p{
  font-weight: bold;
  text-align: right;
  /* PC端：文本右对齐，input跟随右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem; /* 可选：增加文本与input的间距 */
}
h4{
  background-color: #ecf0f1;
  padding: .5rem;
}
@media (max-width: 500px) {
  .container{
    grid-template-columns: 1fr;
  } 
  p{
    text-align: center;
    align-items: center; /* 移动端：文本和input都居中对齐 */
  }
  input {
    padding-left: 2rem;
  }
}

效果说明 #

• PC端：保持原有右对齐布局，文本和input垂直排列且右对齐；
• 移动端：所有文本和input居中对齐，input始终固定在文本下方，不会出现长短文本布局不一致的问题。

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