Html 使用CSS将登录表单显示为表

我对HTML/CSS完全无知。以下是我的表单，我想以CSS表格的形式显示，而不是HTML：

<div id="form">
    <form name="loginSubmit">
        <div class="inputBox">
            <b>First name:</b> <input type="text" name="Username">
        </div>
        <div class="seperator"></div>
        <div class="inputBox">
            <b>Password:</b> <input id="txtPassword" type="password" name="pwd">
        </div>
        <div class="seperator"></div>
        <b>Remember me</b> <input type="button" id="1" value="ON"
                style="color: black" onclick="toggle(this);" />
    </form>
</div>

名字：
密码：
记得我吗

---

请帮忙。提前谢谢。

我建议看一下引导程序。它使创建表单变得非常容易

下面是一个例子：

您只需将以下内容添加到标题中：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

---

我建议看一下引导。它使创建表单变得非常容易

下面是一个例子：

您只需将以下内容添加到标题中：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

根据您的代码，这里非常简单。我使用

display:inline block

格式化文本：

#form > form input, #form > form b {
  display: inline-block;
  width: 150px;
}

这里是非常简单的基于您的代码。我使用

display:inline block

格式化文本：

#form > form input, #form > form b {
  display: inline-block;
  width: 150px;
}

---

您可以执行以下操作：

  <form name="loginSubmit">
    <table>
        <tr>
            <td><b>First name:</b></td>
            <td><input type="text" name="Username"></td>
        </tr>
        <tr>
            <td><b>Password:</b></td>
            <td><input id="txtPassword" type="password" name="pwd"></td>
        </tr>
        <tr>
            <td><b>Remember me</b></td> 
            <td><input type="button" id="1" value="ON" style="color: black" onclick="toggle(this);" /></td>
    </tr>
     </table>       
   </form>

名字：
密码：
记得我吗

---

这将解决任何对齐问题

您可以执行以下操作：

  <form name="loginSubmit">
    <table>
        <tr>
            <td><b>First name:</b></td>
            <td><input type="text" name="Username"></td>
        </tr>
        <tr>
            <td><b>Password:</b></td>
            <td><input id="txtPassword" type="password" name="pwd"></td>
        </tr>
        <tr>
            <td><b>Remember me</b></td> 
            <td><input type="button" id="1" value="ON" style="color: black" onclick="toggle(this);" /></td>
    </tr>
     </table>       
   </form>

名字：
密码：
记得我吗

---

这将解决任何对齐问题

要将其呈现为CSS表格，需要在反映表格结构的元素上设置

display

属性。这至少需要对标记进行一次更改，即将（可能）构成最后一行的两个元素放入一个容器中，而不是一行。假设在渲染时要丢弃空的

div

元素，下面是代码：

<style>
#form > form { display: table }
#form > form > div { display: table-row }
#form > form > div.seperator { display: none }
#form > form > div > * { display: table-cell }
</style>
<div id="form">
    <form name="loginSubmit">
        <div class="inputBox">
            <b>First name:</b> <input type="text" name="Username">
        </div>
        <div class="seperator"></div>
        <div class="inputBox">
            <b>Password:</b> <input id="txtPassword" type="password" name="pwd">
        </div>
        <div class="seperator"></div>
        <div>
        <b>Remember me</b> <input type="button" id="1" value="ON"
                style="color: black" onclick="toggle(this);" />
        </div>
    </form>
</div>

#表格>表格{显示：表格}
#表单>表单>div{display:table row}
#表单>表单>div.separator{display:none}
#表单>表单>div>*{display:table cell}
名字：
密码：
记得我吗

---

使用HTML表更容易、更健壮、更结构化。然而，本作业（？）在说明如何在无法使用HTML表格的情况下使用CSS表格格式方面可能很有用。

要将其呈现为CSS表格，需要在反映表格结构的元素上设置

显示属性。这至少需要对标记进行一次更改，即将（可能）构成最后一行的两个元素放入一个容器中，而不是一行。假设在渲染时要丢弃空的
div
元素，下面是代码：

<style>
#form > form { display: table }
#form > form > div { display: table-row }
#form > form > div.seperator { display: none }
#form > form > div > * { display: table-cell }
</style>
<div id="form">
    <form name="loginSubmit">
        <div class="inputBox">
            <b>First name:</b> <input type="text" name="Username">
        </div>
        <div class="seperator"></div>
        <div class="inputBox">
            <b>Password:</b> <input id="txtPassword" type="password" name="pwd">
        </div>
        <div class="seperator"></div>
        <div>
        <b>Remember me</b> <input type="button" id="1" value="ON"
                style="color: black" onclick="toggle(this);" />
        </div>
    </form>
</div>


#表格>表格{显示：表格}
#表单>表单>div{display:table row}
#表单>表单>div.separator{display:none}
#表单>表单>div>*{display:table cell}
名字：
密码：
记得我吗

使用HTML表更容易、更健壮、更结构化。然而，这个家庭作业（？）在说明如何在无法使用HTML表格的情况下使用CSS表格格式方面可能很有用。
您的HTML看起来不错-您看过任何基本的免费CSS教程吗？如果你尝试，你可能会成功。你能澄清一下你所说的“以CSS表格的形式，而不是HTML”是什么意思吗。你想让它看起来像一个表吗？比如，名字：在同一行中（以行的形式）。。我问这个问题是因为用户名没有以输入框为中心。你的html看起来不错-你看过任何基本的免费css教程吗？如果你尝试，你可能会成功。你能澄清一下你所说的“以CSS表格的形式，而不是HTML”是什么意思吗。你想让它看起来像一个表吗？比如，名字：在同一行中（以行的形式）。。我问这个问题是因为用户名没有与输入框居中。我如何使用CSS属性来做同样的事情。我如何使用CSS属性来做同样的事情。