0

我对 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>

请帮忙。提前致谢。

4

4 回答 4

1

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

这是一个例子： http: //getbootstrap.com/css/#forms

您需要做的就是将其添加到您的标题中：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
于 2013-10-16T19:22:01.837 回答
1

这是基于您的代码的关于 JSFiddle的非常简单的示例。我曾经display: inline-block格式化文本：

#form > form input, #form > form b {
  display: inline-block;
  width: 150px;
}
于 2013-10-16T19:31:39.003 回答
1

您可以执行以下操作：

  <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>

这将解决任何对齐问题。

于 2013-10-16T19:31:53.010 回答
1

要将其呈现为 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>

使用 HTML 表格更容易、更健壮且更具结构性。然而，这个作业 (?) 在说明如何在无法使用 HTML 表格的情况下使用 CSS 表格格式时可能很有用。

于 2013-10-16T20:36:36.740 回答