React中如何在两个并排输入框之间插入文本内容

问题根因 #

你当前的CSS给左右两个输入框容器各设置了50%的宽度，二者加起来已经占满父容器的整行宽度，中间的文本没有剩余排布空间，会被挤到下一行。同时你使用的<text>不是标准HTML通用标签，建议替换为<span>避免潜在的渲染异常。

推荐解决方案（Flex布局，兼容性好、易维护） #

修改后CSS代码

.two-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.two-col .col1,
.two-col .col2 {
  flex: 1;
  background: #f2f2f2;
}

.two-col input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #e5e5e5;
}

.two-col .rank-label {
  white-space: nowrap;
}

修改后React组件代码

return(
  <div className="two-col">
    <div className="col1">
      <input type="text" required placeholder="0..." name="minRank" onChange={update} />
    </div>
    <span className="rank-label"> &lt; Ranking &lt; </span>
    <div className="col2">
      <input type="text" required placeholder="1000..." name="maxRank" onChange={update} />
    </div>
  </div>
);

可选：基于原有浮动逻辑的调整方案 #

如果必须保留浮动写法，可调整两个输入框容器的宽度，给中间文本留出排布空间：

.two-col {
    overflow: hidden;
}

.two-col .col1,
.two-col .col2 {
    /* 调整宽度为45%，留出10%左右的空间给中间文本 */
    width: 45%;
    background: #f2f2f2;
}

.two-col .col1 {
    float: left;
}

.two-col .col2 {
    float: right;
}

/* 给中间文本加行高对齐输入框 */
.two-col span {
    float: left;
    line-height: 28px;
    margin: 0 2%;
    width: 6%;
    text-align: center;
}

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