React布局实现：输入框与选择菜单并排且输入框下方显示标签

需求说明 #

表单中有一个输入框和选择菜单，需要实现：

• 输入框与选择菜单横向并排显示
• 输入框正下方直接显示提示标签（如(Example Jr - Sr)）
  当前遇到的问题是标签要么与两个元素同行，要么居中显示在两者下方，无法达到预期布局。以下是修正后的代码和说明。

修改后的组件代码 #

return (
  <div style={{ backgroundColor: 'green' }}> {/* 给该div添加背景色 */}
      <div className='container'>
        <div className="bg-white p-6 rounded-lg shadow-md">
          <div className="flex justify-between items-center mb-6"> {/* 用flex容器对齐元素 */}
            <button className="back-btn" onClick={() => navigate(-1)}>&lt;&lt;</button>
            
            <h4 className="text-2xl font-semibold ml-4 mb-0 medallionHeading">Create new profile</h4> {/* 添加左外边距 */}
          </div>
          <div className='flex items-center mb-6 border-bottom'>
            <p>Personal Details</p>
          </div>
          <div className='flex items-center info-para'>
            <p className="mb-4 ">Start by entering as much info as you can </p>
          </div>
          <form onSubmit={handleCreateMedallion} encType='multipart/form-data'>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
              <input className="border p-2 name-inputs" type="text" name="firstName"  required onChange={handleMedallionInputChange} placeholder='First Name: *' />
              <input className="border p-2 name-inputs" type="text" name="middleName"  onChange={handleMedallionInputChange} placeholder="Middle name:" />
              <input className="border p-2 name-inputs" type="text" name="lastName" required onChange={handleMedallionInputChange} placeholder='Last Name: *' />
            </div>
    {/* 修正后的输入框+选择菜单布局 */}
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
      {/* 输入框与标签垂直容器 */}
      <div className="flex flex-col">
        <input className="border p-2 title-and-relationship-inputs" type="text" name="ln" id="ln" />
        <label htmlFor="ln" className="label-below">(Example Jr - Sr)</label>
      </div>
      <select className="border p-2 title-and-relationship-inputs">
        <option>-- Relationship Select an option --</option>
      </select>
    </div>
         
          </form>
        </div>
      </div>
    </div>
)

修改后的样式代码 #

.flex.items-center {
    display: flex;
}

.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.medallionHeading {
    margin-left: 1rem;
    padding-top: 0.5rem;
}

.border-bottom {
    border-bottom: 1px solid #ccc;
    margin: 0.5rem 1rem 0.5rem 1rem; /* 上、右、下、左外边距*/
}

.info-para {
    margin-left: 1rem;
}

.name-inputs {
    width: 30%;
    margin: 0.25rem;
}

.title-and-relationship-inputs {
    width: 100%; /* 修改为100%填充容器 */
    margin: 0.25rem;
}

.label-below {
  font-size: 0.75rem;
  color: #888;
  margin-top: 0.25rem;
  display: block;
}

.flex-container {
    display: flex;
    align-items: center;
}

.checkbox-label {
    margin-left: 1rem;
}

关键修改说明 #

• 结构包裹：将输入框和标签放入flex flex-col容器，强制标签在输入框正下方垂直排列。
• 网格调整：将原sm:grid-cols-3改为sm:grid-cols-2，让输入框容器和选择菜单各占一列，实现横向并排；移动端保持单列布局适配小屏幕。
• 宽度适配：把.title-and-relationship-inputs的宽度设为100%，使其自动填充所在网格列的空间，避免手动设置百分比导致的布局错位。
• 语义修正：React中标签的for属性需替换为htmlFor，同时给输入框设置对应id，确保标签与输入框的关联功能正常。

内容的提问来源于stack exchange，提问作者program.exe