如何为HTML form标签添加方形边框且避免输入框换行

问题根源在于input元素的默认布局特性：input默认是inline-block类型，当form容器宽度缩小后，同一行的两个input总宽度（包含默认边距、内边距）超过容器宽度时，就会触发自动换行。以下是几种可行的解决方式：

方法1：使用Flex布局（推荐） #

通过Flex布局可以灵活控制内部元素排列，同时让输入框自适应宽度，还能替代冗余的<br>标签管理间距：

.main-form{
  width: 600px; /* 设置你需要的自定义宽度 */
  position: absolute;
  border: 5px solid red;
  left: 0;
  right: 0;
  margin: 0 auto; /* 可选，让form居中显示 */
  display: flex;
  flex-direction: column; /* 让每组输入框垂直排列 */
  gap: 20px; /* 控制各组之间的间距 */
  padding: 20px; /* 避免内部元素贴紧边框 */
  box-sizing: border-box;
}
/* 给同一行的输入框添加容器，实现横向排列 */
.form-group{
  display: flex;
  gap: 10px; /* 控制同组内两个input的间距 */
}
.form-group input{
  flex: 1; /* 让input平分组内可用宽度 */
  box-sizing: border-box; /* 确保内边距、边框不额外增加宽度 */
}
/* 调整按钮样式，可选 */
.sign-up-button{
  width: fit-content;
  margin: 0 auto;
}

对应的HTML结构调整（移除多余<br>，用div分组）：

<form class="main-form">
  <div class="form-group">
    <input type="text" class="first-name" placeholder="Please type your first name!" required>
    <input type="text" class="last-name" placeholder="Please type your last name!" required>
  </div>
  <div class="form-group">
    <input type="text" class="username" placeholder="Please type your username!" required>
    <input type="email" class="email" placeholder="Please type your email!" required>
  </div>
  <div class="form-group">
    <input type="password" class="password" placeholder="Please type a password!" required>
    <input type="password" class="password-confirm" placeholder="Please confirm password!" required>
  </div>
  <button class="sign-up-button">Sign up</button>
</form>

方法2：固定输入框宽度并调整盒模型 #

如果不想用Flex，可以直接给input设置固定宽度，同时开启box-sizing: border-box避免边框、内边距增加总宽度：

.main-form{
  width: 600px;
  position: absolute;
  border: 5px solid red;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
.main-form input{
  width: calc(50% - 5px); /* 计算宽度，减去两个input的间距 */
  box-sizing: border-box;
  margin-right: 5px; /* 控制input之间的间距 */
}
/* 移除每行第二个input的右侧间距 */
.main-form input:nth-child(2n){
  margin-right: 0;
}

HTML可保留原有结构（建议减少<br>数量，用margin控制垂直间距）：

<form class="main-form">
  <input type="text" class="first-name" placeholder="Please type your first name!" required>
  <input type="text" class="last-name" placeholder="Please type your last name!" required>
  <br><br>
  <input type="text" class="username" placeholder="Please type your username!" required>
  <input type="email" class="email" placeholder="Please type your email!" required>
  <br><br>
  <input type="password" class="password" placeholder="Please type a password!" required>
  <input type="password" class="password-confirm" placeholder="Please confirm password!" required>
  <br><br>
  <button class="sign-up-button">Sign up</button>
</form>

方法3：去除input默认外边距 #

input默认带有少量外边距，可能导致总宽度超出容器，可先清除默认边距再调整宽度：

.main-form{
  width: 600px;
  position: absolute;
  border: 5px solid red;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px;
}
.main-form input{
  width: 49%; /* 用49%而非50%，预留边框和间距的空间 */
  box-sizing: border-box;
  margin: 0; /* 清除默认外边距 */
}

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