html中的表占用了所有的屏幕，比其他列大一列

Question

您好我基本上想要创建一个登录页面，页面的一边说登录，另一边说是注册。我想通过实现一个2列表来实现它。这就是我对html的看法：     

    <table width = 100% border= "1">
        <tr>
            <td>
                <div class = 'login' >
                Login 
                <form action="demo_form.asp" >
                    Username: <input type="text" id="username"><br/>
                    Password: <input type="text" id="password"><br/>
                    <input type="submit" value="Submit">
                </form>
                </div>
            </td>
            <td>
                <div class = 'register'>
                    Register
                    <form action="demo_form.asp">
                    First Name: <input type="text" id="first"><br>
                    Last Name: <input type="text" id="last"><br>
                    Username: <input type="text" id="newuser"><br>
                    Password: <input type="text" id="newpassword"><br>
                    Confirm Password: <input type="text" id="newpassword"><br>
                    <input type="submit" value="Submit">
                </form>

                </div>
            </td>
        </tr>
    </table>

</body>

然而，即使我将表格的宽度设置为我可以看到的屏幕的100％，因为我添加了一个边框，右边的列比左边的列大。为什么这样，我该如何解决？这是一个侧面说明，但我也将如何使我的输入字段对齐，就像所有在同一位置，现在它看起来非常难看。我会提供任何帮助！

Answer 1

我只是讨厌桌子（就像许多人一样）并且觉得他们因某种原因而死亡，感觉现代的html css是一条更加坚固的路线。这只是我的头脑，但应该得到你想要的。您还提到过想要将内容集中在一起，这里有一篇关于几种不同技术的好文章。 http://css-tricks.com/centering-css-complete-guide/

<div class="wrapper">
  <div class="left_col">

  </div>
  <div class="right_col">

  </div>
</div>

html, body, .wrapper{
  width:100%;
  height:100%;
}
.wrapper{
  overflow:hidden;
}
.left_col{
  height:100%;
  width:50%;
  float:left;
}
.right_col{
 height:100%;
 width:50%;
 float:right;
}

Answer 2

要将输入字段排成一行，您只需将所有文本放入<span>，然后使用它来设置下一个对象可以显示的宽度。所以看起来应该是这样的。

您的HTML

<span>Login</span> 
<form action="demo_form.asp" >
    <span>Username: </span><input type="text" id="username"><br/>
    <span>Password: </span><input type="text" id="password"><br/>
    <input type="submit" value="Submit">
</form>

你的CSS

span{
    width: 100px;
    display: inline-block;
}

我建议的另一件事是使用标签，只需快速搜索就可以启发它。