CSS表单2 组件排版

CSS 2020-07-24
<!DOCTYPE html>
< html >
     < head >
         < title >单选按钮对齐</ title >
         < style type = "text/css" >
             div {
                 margin: 10px;
                 padding-bottom: 10px;
                 max-width:360px;
             }
             .title {
                 float: left;
                 width: 100px;
                 text-align: right;
                 padding-right: 10px;}
             .submit {
                 text-align: right;}
         </ style >     
     </ head >
     < body >
     < h1 >软件开发，成就梦想</ h1 >
     < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > 
         < form  method = "post" >
             < div >
                 < label for = "name" class = "title" >用户名:</ label >
                 < input type = "text" id = "name" name = "name" />
             </ div >
             < div >
                 < label for = "password" class = "title" >密码:</ label >
                 < input type = "password" id = "password" name = "password" />
             </ div >
             < div >
                 < span class = "title" >性别:</ span >
                 < input type = "radio" name = "gender" id = "male" value = "M" />
                 < label for = "male" >男</ label >
                 < input type = "radio" name = "gender" id = "female" value = "F" />
                 < label for = "female" >女</ label >< br />
             </ div >
             < div class = "submit" >
                 < input type = "submit" value = "提交" id = "submit" />
             </ div >
         </ form >
     </ body >
</ html >

相关文章

Css3如何实现鼠标移上变长特效？
Css3如何实现鼠标移上变长特效？（图文+视频）
css3怎么实现鼠标悬停图片时缓慢变大效果?
css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）
jquery如何实现点击网页回到顶部效果？
jquery如何实现点击网页回到顶部效果？（图文+视频）
css3边框阴影效果怎么做？
css3边框阴影效果怎么做？（图文+视频）
css怎么实现圆角边框和圆形效果？（图文+视频教程）
css怎么实现圆角边框和圆形效果？（图文+视频教程）
Css3如何实现旋转移动动画特效
Css3如何实现旋转移动动画特效