0

我有一个非常简单的 Web 表单，它由标签和输入字段组成，但是我似乎无法找到一种方法将表单对齐在页面的中心，并使标签具有相等的宽度，以便它们整齐地出现在旁边彼此，一个在另一个之下。我的页面结构基本上是：

<body>
<div class="form">
<form method="post">
<fieldset>
<label>Mobile:</label><input type="text" name="msisdn"><br/>
<label>Code:</label><input type="text" name="code"><br/>
<br/>
<input type="image" src="submit-button.gif" alt="Submit">
<br/>
<input type="checkbox" name="ts_and_cs"><label> Accept Terms and Conditions</label>
<br/><br/>
</fieldset>
</form>
</div>
</body>

通常我会通过float:left在标签字段上执行并在标签上设置宽度来解决此问题，但是为此我需要将标签和输入字段置于页面中心。此外，我无法设置页面（或任何包含 div）的宽度，因为页面将显示在具有不同屏幕尺寸的移动设备上。

关于如何最好地设计表单的任何建议？谢谢

4

4 回答 4

2

试试这个 CSS：

.form { margin: 0 auto; }
.form label { display: inline-block; width: 150px; } /* Replace the width here with what you want */
于 2010-04-15T22:24:47.373 回答
1

您可以将周围环境居中<div class="form">并使用float:left标签的宽度。它们漂浮在居中的左侧div。

也许您需要<div>在标签/输入组合周围添加 s 以将它们保持在一行。

PS我不知道是不是例子的原因，但是通过<label>标签可以指定一个for属性，使标签属于输入字段，并使其可点击。请参阅此处了解更多信息。

于 2010-04-15T22:25:01.850 回答
0

建议您在标签和输入标签上设置边距属性，但您可以将每一行包含在一个 div 中。

例如;

<div style="margin: 0 auto;"> <label>Mobile:</label><input type="text" name="msisdn"> </div>

设置为 0 auto 的边距本质上是在页面上居中

于 2010-04-15T22:33:21.457 回答
0

与其他几乎相同，尽管我会使用相对宽度添加一个输入元素以防止其缩小并留下空白不平衡。

<head>
    <title></title>
    <style type='text/css'>
    .container
    {
        margin: 0 auto;
    }
    .container label
    {
        /* tweak to taste */
        float: left;
        width: 35%;
    }
    .container input
    {
        /* tweak to taste */
        width: 63%;
    }
    </style>
</head>
<body>
    <div class="form">
        <form method="post">
        <fieldset>
            <div class="container">
                <label>Mobile:</label>
                <input type="text" name="msisdn" />
            </div>
            <div class="container">
                <label>Code:</label>
                <input type="text" name="code" />
            </div>
            <div></div>
            <br />
            <input type="image" src="submit-button.gif" alt="Submit" />
            <br />
            <input type="checkbox" name="ts_and_cs" />
            <label>Accept Terms and Conditions</label>
            <br />
            <br />
        </fieldset>
        </form>
    </div>
</body>
于 2010-04-15T23:11:30.150 回答