Question

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

<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的宽度），因为页面将显示在具有不同屏幕尺寸的移动设备上。

有关表格最佳风格的任何建议吗？感谢

Answer 1

试试这个CSS：

.form { margin: 0 auto; }
.form label { display: inline-block; width: 150px; } /* Replace the width here with what you want */

Answer 2

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

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

PS 我不知道是否是由于示例，但使用<label>标记，您可以指定for属性以使标签属于输入字段并使它们可以点击。有关详细信息，请参阅here。

Answer 3

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

E.g;

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

0自动保证金的设置基本上以页面

为中心

Answer 4

与其他人几乎相同，但我会使用相对宽度添加一个输入元素，以防止缩小并使空白偏向左侧。

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

中心对齐形式，宽度相等的标签

4 个答案: