注册表单文本框垂直对齐求助（禁用table属性）

嘿，这个需求其实很好实现，不用table的话，用CSS Flexbox或者Grid都能轻松搞定，我给你推荐两种实用的方法，先从Flexbox开始说，这也是现在最常用的布局方式：

方法一：Flexbox 布局 #

首先我们需要给每个表单标签（比如“Korisničko ime:”）加上<label>标签，这样方便我们单独控制样式，然后通过Flex布局让标签和输入框对齐。

修改后的HTML代码 #

<div class="bg"> </div>
<div class="reg">
 <h1> Napravite svoj nalog </h1>
 <form class="regi" method="post" action="Naslovna.html">
 <p>
   <label>Korisničko ime:</label>
   <input type="text" size="14">
 </p>
 <p>
   <label>Lozinka:</label>
   <input type="password" size="15">
 </p>
 <p>
   <label>Potvrdite lozinku:</label>
   <input type="password" size="15">
 </p>
 <p>
   <label>Vaša e-mail adresa:</label>
   <input type="text" size="15">
 </p>
 <p>
   <label>Potvrdite e-mail adresu:</label>
   <input type="text" size="15">
 </p>
 <p> Da li želite da dobijate obaveštenja na e-mail o novostima sa sajta? </p>
 <br>
 <p> <input type="radio" name="obav" value="Da" checked> Da <input type="radio" name="obav" value="Ne"> Ne </p>
 <p> <input type="submit" value="Registrujte se"> </p>
 </form> <!-- 原代码漏了闭合form标签，这里补上 -->
 </div>

新增/修改的CSS代码 #

/* 给带输入框的表单行设置Flex布局 */
.reg .regi p:not(:nth-child(6)):not(:nth-child(8)):not(:nth-child(9)) {
  display: flex;
  align-items: center;
  gap: 10px; /* 标签和输入框的间距，可根据需求调整 */
}

/* 给标签设置固定宽度并右对齐 */
.reg .regi label {
  width: 220px; /* 按最长的标签文字调整宽度，确保所有标签都能放下 */
  text-align: right;
}

解释一下：

• 用:not()选择器排除了不需要对齐的行（比如询问通知的文本、单选按钮和提交按钮的行），只对带输入框的行应用Flex布局。
• 给label设置固定宽度并右对齐，再加上你已经给输入框设置了width:200px，所有输入框的右侧自然就会落在同一垂直线上了。

方法二：Grid 布局 #

如果你更喜欢Grid，这个方案代码更简洁：

修改后的CSS代码 #

/* 给表单容器设置Grid布局 */
.reg .regi {
  display: grid;
  grid-template-columns: 220px auto; /* 第一列固定宽度放标签，第二列自适应放输入框 */
  align-items: center;
  gap: 10px;
}

/* 把不需要放在Grid里的行合并两列 */
.reg .regi p:nth-child(6),
.reg .regi p:nth-child(8),
.reg .regi p:nth-child(9) {
  grid-column: 1 / -1; /* 跨两列显示，避免被Grid布局拆分 */
}

这个方法直接给表单容器.regi设置Grid布局，让标签和输入框自动归位，再把特殊行跨列处理，同样能实现输入框右侧对齐的效果。

最后提醒下，原HTML里的form标签没闭合，记得补上，不然可能会出现布局异常哦。

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