【CSS】用fieldset、ol、li创建整齐干净的提交表单

先上效果图：

再上代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>标题</title>
     <style type="text/css">
     /*CSS样式*/
        fieldset{
            width:316px;
        }
        fieldset ol{
            list-style:none;
            padding:0px;
            magin:2px;
        }
        fieldset ol li{
            margin:0 0 9px 0;
            padding:5px;
            clear:both;
        }
        fieldset label{
            width:100px;
            float:left;
            text-align:right;
            padding:0 5px 0 0;
        }
        fieldset input{
            float:left;
           /* display:none;*/
        }
     </style>
    </head>

     <body>
        <form>
            <fieldset id="">
                <legend>Create New Account</legend>
                <ol>
                    <li>
                        <label for="first_name">First Name:</label>
                        <input id="first_name" type="text" placeholder="Bill">
                    </li>
                    <li>
                        <label for="last_name">Last Name:</label>
                        <input id="last_name" type="text"  placeholder="Gates">
                    </li>
                    <li>
                        <label for="email">Email:</label>
                        <input id="email" type="text"  placeholder="bg@ms.com">
                    </li>
                    <li>
                        <label for="pswd">Password:</label>
                        <input id="pswd" type="password"  placeholder="6-8 characters">
                    </li>
                    <li>
                        <label for="smt">&nbsp;</label>
                        <input id="smt" type="submit" value="提交注册"/>
                    </li>
                </ol>
            </fieldset>
        </form>

     </body>
</html>
<script type="text/javascript">
<!--
    // 脚本
//-->
</script>

End

相关阅读:
java 用代码实现判断字符串的开头和结尾
java基础 1-path
C#基础（语句 for循环）
C#基础（数组）
C#基础（语句 if else）
C#基础（变量、常量、运算符）
继承-person
继承-字母表
继承-monkey
继承-people

原文地址：https://www.cnblogs.com/heyang78/p/15584192.html