How to switch from table to div for FORM layout?

前端 未结 5 1108
栀梦
栀梦 2020-12-23 15:46

I\'m noticing most folks are talking about using DIVs and CSS for label, textbox pairs. How would one convert a table such as:

5条回答
  •  情话喂你
    2020-12-23 16:07

    Based on @p.cambell answer and the implementation with css, I wrote this code in asp.net for a login popup screen:

    css

    .flotante-login {
        border:solid 2px #b7ddf2;
        border-radius: 5px;
        padding: 15px;
        background:#ebf4fb;
    }
    .loginBox {
        margin: 0 auto;
        width: 400px;
        padding: 10px;
    }
    #login{
    }
    #login h1 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
    }
    #login p{
           font-size:11px;
           color:#666666;
           margin-bottom:20px;
           border-bottom:solid 1px #b7ddf2;
           padding-bottom:10px;
       }
       #login label{
           display:block;
           font-weight:bold;
           text-align:right;
           width:140px;
           float:left;
       }
       #login .small{
           color:#666666;
     display:block;
           font-size:11px;
           font-weight:normal;
           text-align:right;
           width:140px;
       }
       #login input{
           float:left;
           font-size:12px;
           padding:4px 2px;
           border:solid 1px #aacfe4;
           width:200px;
           margin:2px 0 20px 10px;
       }
       #login a{
           clear:both;
           width:125px;
           padding: 10px;
           background-color: #E2B66B;
           color:#FFFFFF;
           text-align:center;
           text-decoration: none !important;
           line-height:30px;
           font-weight:bold;
           color: #FFF !important;
           border-radius: 5px;
       }
    

    aspx page:

    
    

    The result is: Login popup screen

提交回复
热议问题