html - HTML - 添加 FORM 后无法将内容放入框中

Question

经过数小时的尝试诊断后，我似乎无法弄清楚这一点。

我有一个包含一些登录内容的圆形框。在我添加完成后，它似乎跳出了内容

这是它的jsfiddle，我真的很困惑

http://jsfiddle.net/Ck6Bp/

<p id="loginContainer">
<form>
<input type="text" name="username" value="username" />
<br/>
<input type="password" name="password" value="NSxPussinskiboots" />
<br/>   <span id="mini"><a href="#">Register</a> | <a href="#">Forgot your password?</a></span> 
<br/>
<input type="submit" name="login" value="Log Me In" />Login below:
<br/>
<br/>
</form>

p#loginContainer {
display:block;
font-size:1.5em;
background: rgba(0, 0, 0, .55);
padding:40px;
border-radius:6px;} 
form { width: auto; height:auto; }

Answer 1

<p>将标签更改为<div>标签。我还删除了CSS 文件中的pbefore#loginContainer以便正确调用 id。

HTML

<div id="loginContainer">
    <form>
    <input type="text" name="username" value="username" />
    <br/>
    <input type="password" name="password" value="NSxPussinskiboots" />
    <br/>   <span id="mini"><a href="#">Register</a> | <a href="#">Forgot your password?      </a></span> 
    <br/>
    <input type="submit" name="login" value="Log Me In" />Login below:
    <br/>
    <br/>
    </form>
</div>

CSS

#loginContainer {
    display:block;
    //margin-left:60%;
    font-size:1.5em;
    background: rgba(0, 0, 0, .55);
    padding:40px;
    border-radius:6px;
    text-align: left;
}
form { width: auto; height:auto; }

这是小提琴http://jsfiddle.net/SfMZH/。

希望这可以帮助！