请教这个布局应该如何改

2012-12-19

请问这个布局应该怎么改现在的效果是这样的，“用户名”和“密码”的div在输入框的右边，应该放在输入框的左边，

请问这个布局应该怎么改

现在的效果是这样的，“用户名”和“密码”的div在输入框的右边，应该放在输入框的左边，请问应该怎么调整。


<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<form id="Index" runat="server">
<div class="container">
<div class="login_container" id="Div1">
<div class="login_box">
<div class="logo_title"><h1>登录信息系统</h1>
</div>
<asp:Label ID="lblMessage" runat="server" ForeColor="OrangeRed"></asp:Label>
<div class="login_operate" style="display:block" id="web_login">
<div class="username">
<label class="txt_default" for="uin" id="label_uin" default_txt="用户名">&nbsp;</label>
<input  class="txt alias" id="username" name="uin" type="text" tabindex="1"   />
<input  readonly="readonly" class="login_domain" id="domain" name="u_domain" style="font-size:18px;" value="用户名" type="text" tabindex="-1"/>
<input id="u" name="u" value="" type="hidden" />
</div>
<div class="username">
<label class="txt_default" for="p" id="label_p" default_txt="密码">&nbsp;</label>
<input  class="txt alias" id="userpwd" name="p" type="password" tabindex="2"   />
<input  readonly="readonly" class="login_domain" id="Text1" name="u_domain" style="font-size:18px;" value="密 码" type="text" tabindex="-1"/>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>


html,body,p,ul,li,h1,input,form {
margin: 0;
padding: 0;
}
body,input {
font: 12px Verdana,Arial,Helvetica;
}
body {
background: white;
}
.container {
width: 800px;
margin: 20px auto 0;
min-height: 500px;
}
.mask {
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #FFFFFF;
opacity: 0.6;
filter: alpha(opacity=60);
}

.login_container {
float: right;
}
.login_box {
position: relative;
z-index: 11;
width: 305px;
margin-right: 4px;
padding: 20px;
border: 1px solid #ACC3E4;
background: #EDF5FF;
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
border-radius: 5px;
-webkit-border-radius: 5px;
}
.login_box h1 {
color: #274571;
font-size: 16px;
}

.login_box .login_operate {
padding: 12px 0 20px;
}
.login_operate .username,.login_operate .password,.login_operate .about_password,.login_operate .login_submit {
position: relative;
width: 305px;
padding: 5px 0;
z-index: 2\9;
}
.login_operate .login_submit .login_cancel {
margin-left: 12px;
}
.login_operate .username { 
 
height: 38px;
position: relative;
z-index: 10\9;
}
.login_operate .about_password {
padding: 4px 0;
z-index: 1\9;
}
.login_operate .vfcodeinput {
height: 55px;
padding-bottom: 3px;
}
.login_box .txt {
position: relative;
width: 295px;
height: 34px;
line-height: 34px;
padding: 0 4px;
color: #494949;
border: 1px solid #9DADC5;
font-size: 20px;
background: transparent;
outline: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: -webkit-box-shadow .1s linear;
-moz-transition: box-shadow .1s linear;
}
.login_box .alias {
width: 174px;
padding-right: 125px;
}
.login_domain {
position: absolute;
top: 6px;
*top: 7px;
right: 1px;
width: 112px;
height: 31px;
line-height: 32px;
padding: 0 0 3px 8px;
border: none;
border-left: 1px solid #D5DEEC;
color: #4D4D4C;
font-size: 18px;
z-index: 1;

background: url(images/login_ico_selector.gif) no-repeat scroll 105px -25px #FBFBFB;
border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
box-shadow: -1px 0 2px rgba(0,0,0,0.09);
}
.active .login_domain,.login_domain: hover {
background-position: 105px 11px;
background-color: #f7fafe;
}

.login_box .txt_default,.login_box .txt_dim {
position: absolute;
top: 6px;
left: 1px;
width: 289px;
height: 34px;
padding: 0 7px;
line-height: 34px;
font-size: 14px;
color: #8B9096;
background: url(images/login104474.png) no-repeat scroll -1px -97px white;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.login_operate .username_immutable {
padding: 0;
color: #494949;
font-weight: bold;
background: none;
font-size: 16px;
}
.login_box .txt_dim {
color: #DCDDDF;
}
.login_box .txt: focus {
border: 1px solid #9BBBDA;
box-shadow: 0 0 5px rgba(110,189,222,0.5);
-webkit-box-shadow: 0 0 5px rgba(110,189,222,0.5);
}

.login_box .captips {
position: absolute;
top: 43px;
left: 0;
z-index: 20;
padding: 1px;
border: 1px solid;
border-color: #dbc492 #b49366 #b49366 #dbc492;
background: #fdf6aa;
}

.login_box .vfcodeinput input,.login_box .vfcodeinput label {
width: 148px;
height: 34px;
line-height: 34px;
letter-spacing: 2px;
font-size: 26px;
}
.login_box .vfcodeinput label {
font-size: 18px;
line-height: 34px;
width: 142px;
}

.login_box .verifytip,.login_box .vfcode_change {
padding: 10px 0 3px;
}
.login_operate .login_submit {
clear: both;
}
.login_box .login_btn_wrapper {
display: inline-block;
width: 82px;
height: 30px;
height: 28px\9;
margin-top: 9px;
border: 1px solid; 
 
border-color: #6B9F11 #54850A #386601;
background: url(images/login104474.png) repeat-x #67A00D;
background-position: 0 -1px\9;
-webkit-transition: -webkit-box-shadow .1s linear;
-moz-transition: box-shadow .1s linear;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.login_box .login_btn_wrapper_disabled {
display: inline-block;
width: 82px;
height: 30px;
height: 28px\9;
margin-top: 9px;
border: 1px solid;
border-color: #6B9F11 #54850A #386601;
background: url(images/login104474.png) repeat-x #67A00D;
background-position: 0 -1px\9;
border-radius: 3px;
-webkit-border-radius: 3px;
opacity: 0.7;
filter: alpha(opacity=70);
}


.mail_intro {
width: 400px;
margin-left: 16px;
}
.mail_intro h1 {
display: none;
}
.mail_intro ul {
line-height: 20px;
}
.mail_intro ul li {
margin-left: 16px;
list-style: disc outside;
}

[最优解释]


html,body,p,ul,li,h1,input,form {
margin: 0;
padding: 0;
}
body,input {
font: 12px Verdana,Arial,Helvetica;
}
body {
background: white;
}
.container {
width: 800px;
margin: 20px auto 0;
min-height: 500px;
}
.mask {
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #FFFFFF;
opacity: 0.6;
filter: alpha(opacity=60);
}

.login_container {
float: right;
}
.login_box {
position: relative;
z-index: 11;
width: 305px;
margin-right: 4px;
padding: 20px;
border: 1px solid #ACC3E4;
background: #EDF5FF;
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
border-radius: 5px;
-webkit-border-radius: 5px;
}
.login_box h1 {
color: #274571;
font-size: 16px;
}

.login_box .login_operate {
padding: 12px 0 20px;
}
.login_operate .username,.login_operate .password,.login_operate .about_password,.login_operate .login_submit {
position: relative;
width: 305px;
padding: 5px 0;
z-index: 2\9;
}
.login_operate .login_submit .login_cancel {
margin-left: 12px;
}
.login_operate .username {
height: 38px;
position: relative;
z-index: 10\9;
}
.login_operate .about_password {
padding: 4px 0;
z-index: 1\9;
}
.login_operate .vfcodeinput {
height: 55px;
padding-bottom: 3px;
}
.login_box .txt {
position: relative;
width: 295px;
height: 34px;
line-height: 34px;
padding: 0 4px;
color: #494949;
border: 1px solid #9DADC5;
font-size: 20px;
background: transparent;
outline: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: -webkit-box-shadow .1s linear; 
 
-moz-transition: box-shadow .1s linear;
float:right;
}
.login_box .alias {
width: 174px;
}
.login_domain {
position: absolute;
top: 6px;
*top: 7px;
left:0px;
width: 112px;
height: 31px;
line-height: 32px;
padding: 0 0 3px 8px;
border: none;
border-left: 1px solid #D5DEEC;
color: #4D4D4C;
font-size: 18px;
z-index: 1;

background: url(images/login_ico_selector.gif) no-repeat scroll 105px -25px #FBFBFB;
border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
box-shadow: -1px 0 2px rgba(0,0,0,0.09);
}
.active .login_domain,.login_domain: hover {
background-position: 105px 11px;
background-color: #f7fafe;
}

.login_box .txt_default,.login_box .txt_dim {
position: absolute;
top: 6px;
left: 1px;
width: 289px;
height: 34px;
padding: 0 7px;
line-height: 34px;
font-size: 14px;
color: #8B9096;
background: url(images/login104474.png) no-repeat scroll -1px -97px white;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.login_operate .username_immutable {
padding: 0;
color: #494949;
font-weight: bold;
background: none;
font-size: 16px;
}
.login_box .txt_dim {
color: #DCDDDF;
}
.login_box .txt: focus {
border: 1px solid #9BBBDA;
box-shadow: 0 0 5px rgba(110,189,222,0.5);
-webkit-box-shadow: 0 0 5px rgba(110,189,222,0.5);
}

.login_box .captips {
position: absolute;
top: 43px;
left: 0;
z-index: 20;
padding: 1px;
border: 1px solid;
border-color: #dbc492 #b49366 #b49366 #dbc492;
background: #fdf6aa;
}

.login_box .vfcodeinput input,.login_box .vfcodeinput label {
width: 148px;
height: 34px;
line-height: 34px;
letter-spacing: 2px;
font-size: 26px;
}
.login_box .vfcodeinput label {
font-size: 18px;
line-height: 34px;
width: 142px;
}

.login_box .verifytip,.login_box .vfcode_change {
padding: 10px 0 3px;
}
.login_operate .login_submit {
clear: both;
}
.login_box .login_btn_wrapper {
display: inline-block;
width: 82px;
height: 30px;
height: 28px\9;
margin-top: 9px;
border: 1px solid;
border-color: #6B9F11 #54850A #386601;
background: url(images/login104474.png) repeat-x #67A00D;
background-position: 0 -1px\9;
-webkit-transition: -webkit-box-shadow .1s linear;
-moz-transition: box-shadow .1s linear;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.login_box .login_btn_wrapper_disabled {
display: inline-block;
width: 82px;
height: 30px;
height: 28px\9;
margin-top: 9px;
border: 1px solid;
border-color: #6B9F11 #54850A #386601;
background: url(images/login104474.png) repeat-x #67A00D;
background-position: 0 -1px\9;
border-radius: 3px; 
 
-webkit-border-radius: 3px;
opacity: 0.7;
filter: alpha(opacity=70);
}


.mail_intro {
width: 400px;
margin-left: 16px;
}
.mail_intro h1 {
display: none;
}
.mail_intro ul {
line-height: 20px;
}
.mail_intro ul li {
margin-left: 16px;
list-style: disc outside;
}

[其他解释]
改.login_domain 的border

border: 1px solid #9DADC5;
[其他解释]

引用:

CSS code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939……

成这样的了，原来有框的，现在没有了

[其他解释]
注意下高跟宽很容易修改的。

[其他解释]
加个display：block；然后浮动

热点排行