html表单中的对齐问题答案

【问题标题】：Allignment issues in a html formhtml表单中的对齐问题
【发布时间】：2011-08-23 22:44:54
【问题描述】：

我在 html5 文档中有以下表格。就 html 和 css 而言，我是新手。基本上，我正在尝试通过实验来学习。

<form>
    <ol style="list-style:none">
        <li style="display: inline">
            <label for="fname">First Name</label>
            <input id="fname" type="text">
        </li>
        <li style="display: inline">
            <label for="lname">Last Name</label>
            <input id="lname" type="text">
        </li>
        <li>
            <label for="dept">Department</label>
            <input id="dept" type="text">
        </li>
   </ol>
</form>

迎接我面临的挑战，

1)我需要知道如何控制标签和输入字段之间的间距。

2)还有两个li（名字和姓氏）之间的空格。

PS：我还有一个 CSS 文件可以控制字体、颜色、输入宽度等。

【问题讨论】：

label 元素的for 属性引用与其相关的控件的id。您的表单控件上没有 ID。
对不起..这是一个错字。编辑代码。
没有名字的输入不能成功控制。

标签： html css

【解决方案1】：

尝试在您的input 元素上使用margin-bottom 和margin-top。

请参阅here 了解有关 css 中边距的更多信息。

【讨论】：

【解决方案2】：

试试下面的代码。

对于“ol li label”（在 css 代码中），您还可以使用 margin 代替 width，来控制标签和输入项之间的距离。

<head>
    <style>
    ol{
        margin:0; 
        padding:0;
    }
    ol li{
        margin:0 0 10px 0; 
    }
    ol li label{
        width:150px; 
        float:left; 
    }
    ol li input{
        float:left;
    }
    </style>
</head>

<body>
    <form>
        <ol>
            <li>
                <label for="fname">First Name</label>
                <input name="fname" type="text">
            </li>
            <li>
                <label for="lname">Last Name</label>
                <input name="lname" type="text">
            </li>
            <li>
                <label for="dept">Department</label>
                <input id="dept" type="text">
            </li>
       </ol>
    </form>
</body>

【讨论】：