javascript - 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;
}