34°

表单中的文字和文本框对齐的方法

思路:

假设每个表单的父元素为<p>标签,<label>标签为表单的描述,也就是文本框左边的文字,<input>标签为文本框。为了使标签对齐,只需要设置label标签中的width宽度为一定值即可,比如本例中为150px,因为label标签和input标签同属于p标签,他们是从左到右显示的,指定了label标签的长度,即可使表单的文本框对齐。

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>massage-board</title>
    <style>
    label{
        cursor: pointer;
        display: inline-block;
        padding: 3px 6px;
        text-align:right;
        width: 150px;
        vertical-align: top;
    }

&lt;/style&gt;

</head> <body> <form action="board.php"> <fieldset> <p> <label for="sceneName" >场景名:</label> <span id="sceneName">延迟发货预警</span> </p> <p> <label for="sceneType">场景类型:</label> <span id="sceneType">预警</span> </p> <p> <label for="limitTime">限制时间:</label> <input type="text" id="limitTime" name="username" align="left">~<input type="text" id="endTime" name="username" align="left"> </p> <p> <input type="submit"> </p> </fieldset> </form> </body> </html>

效果:

参考来自:  https://blog.csdn.net/GorgeousChou/article/details/79685139   感谢!

本文由【RainTa】发布于开源中国,原文链接:https://my.oschina.net/zjllovecode/blog/3160099

全部评论: 0

    我有话说: