Question

有一個形式表低於其包含形式元素，如文本輸入和驗證消息對齊文本輸入和標籤：

$error_user = (!empty($errors['user']))?$errors['user']:""; 
$error_email = (!empty($errors['email']))?$errors['email']:""; 

      echo "<form action='./forgotpass.php' method='post'> 
      <table> 
      <tr> 
      <td></td> 
      <td id='errormsg'>$errormsg</td> 
      </tr> 
      <tr> 
      <td>Username</td> 
      <td><input type='text' name='user' value='$user'/><br/>".$error_user."</td> 
      </tr> 
      <tr> 
      <td>Email</td> 
      <td><input type='text' name='email' value='$email'/><br/>".$error_email."</td> 
      </tr> 
      <tr> 
      <td></td> 
      <td><input type='submit' name='resetbtn' value='Reset Password' /></td> 
      </tr> 
      </table> 
      </form>"; 

現在我顯示以下相關文本輸入中的每個確認消息，但問題在於allignment。如果我現在正在顯示文本輸入下方的消息，則文本輸入向上移動一點以佔據下面的驗證消息空間，這意味着文本輸入不會與其標籤齊平，例如Email文本輸入未對齊在出現驗證時使用此標籤。

我的問題是，我如何才能獲取標籤和文本輸入保持相互一致時，在下面顯示

Answer 1

驗證消息如果您使用此：

echo "<form action='./forgotpass.php' method='post'> 
     <table> 
     <tr> 
     <td></td> 
     <td id='errormsg'>$errormsg</td> 
     </tr> 
     <tr> 
     <td valign='top'>Username</td> 
     <td valign='top'><input type='text' name='user' value='$user'/><br/>Username Error</td> 
     </tr> 
     <tr> 
     <td valign='top'>Email</td> 
     <td valign='top'><input type='text' name='email' value='$email'/><br/>Email Error</td> 
     </tr> 
     <tr> 
     <td></td> 
     <td><input type='submit' name='resetbtn' value='Reset Password' /></td> 
     </tr> 
     </table> 
     </form>"; 

你應該得到的樣子你要。消息扭曲行的原因是因爲它正在放大一個單元格，因此具有標籤的單元格在中間垂直對齊。請注意0​​？這會將所有內容都推到單元格的頂部，因此第一行中的所有內容都將排成一行。

看到這個JSFiddle

Answer 2

添加style="vertical-align: top"所有TD標籤。您可能還需要爲標籤單元添加一點填充，以便將它們與輸入框中的內容正確對齊。

Answer 3

創建另一個<td>元素顯示錯誤消息像這樣的編輯

<tr> 
<td>Username</td> 
<td><input type='text' name='user' value='$user'/></td> 
<td>".$error_user."</td> 
</tr> 

Answer 4

此外，除了一切都提到，如果沒有別人去你的話，我會嘗試添加在空TD就像一個空間這樣的：

 <td>&nbsp;</td> 
     <td id='errormsg'>$errormsg</td> 

它會使事情均勻分佈