html выравнивание поля

Question

Добрый день,

Я новичок в html. Я добавил поля формы html в свое приложение. Текстовые поля не выровнены, и они выглядят действительно неопрятными. Это связано с тем, что у меня есть имена полей, такие как «первый тег» и «второй тег», у которых есть текстовое поле рядом с ним. Текстовое поле для второго тега больше похоже на левое по сравнению с первым. Есть ли способ, чтобы я мог выровнять их без использования таблицы? если я использую таблицу, могу ли я знать, как мне это сделать? я сожалею, что не могу загрузить какие-либо фотографии, так как я новый пользователь.

ниже - мой html-код.

Благодарим за помощь!

Приветствия, Zhenghong

<div class="rightsettings"> 
     <form name="addsubject" action="html_form_action.asp" method="get"> 
     <br>Subject: <input type="text" name="user" /></br> 
     <br>Number of tags<select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()"> 
      <option value=1>1</option> 
      <option value=2>2</option> 
      <option value=3>3</option> 
      <option value=4>4</option> 
      <option value=5>5</option> 
     </select></br> 
     <div id="addfirsttag"> 
     <br>First Tag: <input type="text" name="tag1"/></br> 
     <div id = "addsecondtag" style="visibility:hidden"> 
     <br>Second Tag: <input type="text" name="tag2"/></br> 
     </div> 
     <div id = "addthirdtag" style="visibility:hidden"> 
     <br>Third Tag: <input type="text" name="tag3"/></br> 
     </div> 
     <div id = "addfourthtag" style="visibility:hidden"> 
     <br>Fourth Tag: <input type="text" name="tag4"/></br> 
     </div> 
     <div id = "addfifthtag" style="visibility:hidden"> 
     <br>Fifth Tag: <input type="text" name="tag5"/></br> 
     </div> 
     <br><input type="submit" value="Submit" /></br> 
     </form> 
    </div> 

Answer 1

со столом

<table> 
<tr><td>First Tag</td><td><input ... /></td></tr> 
<tr><td>Second Tage</td><td><input ... /></td></tr> 
... 
</table> 

с CSS

CSS часть:

label 
{ 
    display: block; 
    width: 150px; 
    float: left; 
} 

HTML часть:

<label for="tag1">First Tag:</label><input ... /><br /> 
<label for="tag2">Second Tag:</label><input ... /><br /> 

Answer 2

Я рекомендую вам вставить свои формы в виде таблиц.

<div class="rightsettings"> 
    <form name="addsubject" action="html_form_action.asp" method="get"> 
     <table cellpadding="1" cellspacing="1" border="0"> 
      <tr><td>Subject:</td><td><input type="text" name="user" /></td></tr> 
      <tr><td>Number of tags::</td><td><select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()"> 
       <option value=1>1</option> 
       <option value=2>2</option> 
       <option value=3>3</option> 
       <option value=4>4</option> 
       <option value=5>5</option> 
      </select></td></tr> 

      <tr><td>First Tag:</td><td><div id="addfirsttag"><input type="text" name="tag1"/></div></td></tr> 
      <!-- all your tags like the one above --> 
      <tr><td colspan="2" align="center"><input type="submit" value="Submit" /></td></tr> 
     </table> 
    </form> 
</div> 

Answer 3

попробовать это один

<table> 
    <tr style="visibility:hidden"><td>First tag :><td><input type="text" name="tag1"/></td></tr> 
    <tr style="visibility:hidden"><td>Second tag :><td><input type="text" name="tag2"/></td></tr> 
    <tr style="visibility:hidden"><td>Third tag :><td><input type="text" name="tag3"/> </td></tr> 
    <tr><td colspan="2" align="center"><input type="submit"></td></tr> 
    </table>