layout.html 表单提交,html - How to switch from table to div for FORM layout? - Stack Overflow

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:

Acceso

Usuario:

Ingresa tu email

Contraseña:

Ingresa tu contraseña

The result is: