4x4 Wordle游戏输入字母竖排改横排问题求助

问题：开发4x4的Wordle猜词游戏时，输入字母会从上到下填充方块，而非预期的从左到右横排填充，需要调整代码实现正确的输入逻辑与视觉布局匹配。

问题根源 #

你的JS输入逻辑本身是正确的（按行优先填充，col递增填满当前行后切换到下一行），但CSS布局导致视觉上的方块排列与输入逻辑不匹配：

• .row元素未设置flex布局，内部的.square因为设置了display:flex成为块级元素，会在row中垂直排列，让每行的方块变成纵向列。
• #board使用display:flex; flex-wrap:wrap导致row元素的排列方式不符合预期。

解决方案 #

修改CSS代码，调整布局让方块按行横向排列：

1. 更新.row的样式，添加flex布局让内部方块横向排列：

.row {
  display: flex;
  margin: 5px 0; /* 可选：增加行间距，提升视觉效果 */
}

2. 调整#board的布局，让row元素垂直排列：

#board {
  width: 350px;
  height: 420px;
  margin: 0 auto;
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

3. 确认.square的样式保持不变（display:flex仅用于内部文字居中，无需修改）。

修改后的完整CSS代码 #

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  --correct:#6baa64;
  --background-color:white;
  --text-color:black;
  color: var(--text-color);
  background-color: var(--background-color);
}

body.dark{
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  --correct:#6baa64;
  --background-color:black;
  background-color: var(--background-color);
  --text-color:white;
  color:white;
}

hr {
  width: 500px;
}

#title {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 2px;
}

#board {
  width: 350px;
  height: 420px;
  margin: 0 auto;
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.row {
  display: flex;
  margin: 5px 0;
}

.square {
  border: 2px solid lightgray;
  width: 60px;
  height: 60px;
  margin: 2.5px;
  color: black;
  font-size: 36px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.correct {
  background-color: var(--correct);
  color: white;
  border-color: white;
}

.present {
  background-color: #C9B458;
  color: white;
  border-color: white;
}

.absent {
  background-color: #787C7E;
  color: white;
  border-color:white;
}

#congrats {
  display: none;
}

#dark-mode-toggle {
  position: fixed;
  top: 10px;
  right: 250px;
}

#question{
  position: fixed;
  top: 10px;
  right: 200px;
}

#info{
  position: fixed;
  top: 10px;
  right: 300px;
}

验证JS逻辑 #

你的JS输入逻辑是正确的，无需修改：

• 输入字母时，col递增，填充当前行的从左到右的方块
• 按回车后切换到下一行，col重置为0
• 退格键会回退当前行的输入位置

这样调整后，视觉上的方块会按行横向排列，输入字母时就会呈现预期的从左到右填充效果。

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