Created
December 17, 2012 16:09
-
-
Save libo1106/4319463 to your computer and use it in GitHub Desktop.
表单表单
可以用legend或者h4之类的描述fieldset的标题，并对其进行样式化
PS: Gist能支持zen-coding的话，更加完爆全场勒
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="zh-cn"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>表单label样式</title> | |
| </head> | |
| <style> | |
| form{ | |
| width:400px; | |
| margin: 20px auto; | |
| } | |
| form fieldset{ | |
| margin: 10px 0; | |
| } | |
| form fieldset legend{ | |
| //float:left; | |
| } | |
| form fieldset > div{ | |
| width:250px; | |
| overflow: hidden; | |
| margin: 0 auto; | |
| } | |
| form fieldset > div > p{ | |
| margin: 5px 0; | |
| } | |
| form fieldset >div > p > label{ | |
| display: inline-block; | |
| width: 65px; | |
| } | |
| form fieldset.eg1 >div > p > label{ | |
| text-align: left; | |
| } | |
| form fieldset.eg2 > div > p > label{ | |
| text-align: right; | |
| } | |
| </style> | |
| <body> | |
| <form> | |
| <fieldset class="eg1"> | |
| <legend>左侧对齐</legend> | |
| <div> | |
| <p><label>主机头：</label><input type="text" name="host"></p> | |
| <p><label>路径：</label><input type="text" name="host"></p> | |
| <p><label>端口：</label><input type="text" name="host"></p> | |
| </div> | |
| </fieldset> | |
| <fieldset class="eg2"> | |
| <legend>右边对齐</legend> | |
| <div> | |
| <p><label>主机头：</label><input type="text" name="host"></p> | |
| <p><label>路径：</label><input type="text" name="host"></p> | |
| <p><label>端口：</label><input type="text" name="host"></p> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment