React渲染input横向并排 无法实现单词逐行纵向排布

• 给.letters（即input元素）设置了float: left，浮动属性会让元素脱离普通文档流，自动靠左横向排列
• 所有flex容器都没有设置flex-direction属性，flex布局默认主轴为横向，导致主容器内的两个单词组件、组件内的input元素都默认横向排布
• 原代码中计算的num宽度是为横向排列的字母输入框准备的，纵向排列场景下该逻辑无效。

1. 修正CSS样式 #

/* 主容器：改为纵向排列，让不同单词上下排布 */
.main-content{
  display: flex;
  flex-direction: column;
  background-color: gray;
  color: white;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
}

/* 单词容器：控制内部input纵向排列 */
.word-row {
  display: flex;
  flex-direction: column;
  width: 200px; /* 可根据需求调整输入框宽度 */
  margin: 10px 0; /* 不同单词之间增加上下间距 */
}

/* 输入框样式：移除导致横向排列的浮动属性 */
.letters{
  margin: 2px 0;
  padding: 4px 8px;
}

2. 修改Words组件代码 #

移除无效的宽度计算逻辑，给外层div加上word-row类名：

const Words = ({arr}) => {
  console.log(arr)
  return (
    <div className="word-row">
      {arr.map((letter, idx) =>{
        return(
          <input 
            className="letters" 
            type='text' 
            key={idx}
          />
        )
      })}
    </div>
  )
}

3. 主文件App代码无需调整 #

保持原有逻辑即可，最终效果为Hello对应的所有输入框纵向排成一列，下方是World对应的输入框列，实现单词逐行、输入框依次纵向排布的需求。

如果你的需求是每个单词占一行，单词内的字母输入框横向排列，只需要把.word-row的flex-direction: column去掉即可，主容器保持flex-direction: column就能让单词上下排布。

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