短小精悍的 form代码

8 一
2007

国外的一片文章，用css定义form但是里面几乎就是用了最精悍的代码

html

  1. <form>
  2.  
  3.     <label for="name">Name</label>
  4.     <input id="name" name="name"><br>
  5.  
  6.     <label for="address">Address</label>
  7.     <input id="address" name="address"><br>
  8.  
  9.     <label for="city">City</label>
  10.     <input id="city" name="city"><br>
  11. </form>

CSS

  1. label,input {
  2.     display: block;
  3.     width: 150px;
  4.     float: left;
  5.     margin-bottom: 10px;
  6. }
  7.  
  8. label {
  9.     text-align: right;
  10.     width: 75px;
  11.     padding-right: 20px;
  12. }
  13.  
  14. br {
  15.     clear: left;
  16. }

把label,input用float:left定义成一行，然后距离下面10px,lable单独定义边距和文字并复写宽度，最后用br{clear:left}来换行

原文地址：http://www.quirksmode.org/css/forms.html

评论

top