如何消除标签和输入字段之间的差距？

Question

以下是我的代码，首先是：

• 如何摆脱标签和输入字段之间的右边缘？我尝试将margin-right设置为-150px，这使它变得更小，但这似乎是一种愚蠢的解决方案..
• 如何删除编写<br />以使其自动跳转的需要？我被告知永远不要使用<br />，它似乎也很混乱。

HTML：

<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
            <form action="" method="POST">
                <label>In-game username:</label>
                    <input name="username" type="text"></input><br />
                <label>Email:</label>
                    <input name="email" type="text"></input><br />
                <label>Game:</label>
                    <input name="game" type="text"></input><br />

            <input name="mySubmit" type="submit" value="Submit"></input>
            </form>
</div>

CSS：

label {
    display: block;
    float: left;
    width: 120px;
    margin-right: 5px;
    text-align: right;
}

Answer 1

您可以尝试这样的事情

<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
  <form action="" method="POST">
    <p>
      <label>In-game username:</label>
      <input name="username" type="text"></input>
    </p>
    <p>
      <label>Email:</label>
      <input name="email" type="text"></input>
    </p>
    <p>
     <label>Game:</label>
     <input name="game" type="text"></input>
    </p>
    <p></p>
    <input name="mySubmit" type="submit" value="Submit"></input>
 </form>
</div>

然后是css

p label {
    display: block;
    float: left;
    width: 120px;
    margin-right: 5px;
}

p input{
    float:right;

}

p{
clear:both;
}

form{
    width:20em;
}

http://jsfiddle.net/V92PT/1/

Answer 2

但是这些字段在桌子上 像这样

<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
            <form action="" method="POST">
                <table><tr><td><label>In-game username:</label></td>
                   <td> <input name="username" type="text"></input></td ></tr>
                    <tr><td>   <label>Email:</label></td>
                        <td>  <input name="email" type="text"></input></td></tr>
               <tr><td>  <label>Game:</label></td>
                        <td> 
                    <input name="game" type="text"></input>
</td></tr>
                </table>
            <input name="mySubmit" type="submit" value="Submit"></input>
            </form>
</div>

或在<br/>

之后添加其他<label>In-game username:</label>

或每行使用<p></P>