Heim > Artikel > Web-Frontend > 请问这个布局应该怎么改_html/css_WEB-ITnose
请问这个布局应该怎么改_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:181176Durchsuche
现在的效果是这样的，“用户名”和“密码”的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="用户名"> </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="密码"> </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;} CSS code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939……
成这样的了，原来有框的，现在没有了
注意下高跟宽 很容易修改的 。
改.login_domain 的border
border: 1px solid #9DADC5;
加个display：block；然后浮动
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：请教下列代码是什么意思？高手请进_html/css_WEB-ITnoseNächster Artikel：求助 定义超链接a:link怎么无效呢_html/css_WEB-ITnose