html - html 表单中的对齐问题

标签 html css

我在 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(first name and last names)之间的空格。

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

最佳答案

试试下面的代码。

对于“ol li label”(在 css 代码中),您还可以使用 ma​​rgin 而不是 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>

关于html - html 表单中的对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5975507/

相关文章:

javascript - 将 Div 类附加到超链接类——然后在单击时克隆超链接并将其附加到容器

javascript - 单击时的 jquery 无法正常运行

html - 调整浏览器页面大小时放大/缩小背景图像

html - IE 11 剪切文本

css - 我已经为 div 设置了背景颜色,但是当我减小窗口大小时它就消失了

html - 模糊除悬停之外的所有内容

html - object-fit: contain 不适合 A4 大小的 div 在较小的元素中

html - 具有快速鼠标悬停/鼠标移出的完整悬停动画持续时间?

javascript - JavaScript 中指定的按钮的 onclick 属性在 html 检查中不可见

html - 将 div 放置在屏幕中央的 CSS 布局