CSS问题，求赐教！！！！！！！！！！！！！！！！！！！！！！_html/css

CSS问题，求赐教！！！！！！！！！！！！！！！！！！！！！！_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-21 09:44:10

asal

1047 orang telah melayarinya

CSS HTML

现在有个页面是这样的代码如下，有这么几个需求
1，

上下左右居中于

并且两个div 会随着浏览器的大小自动相对变化
2，

这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px

麻烦大神赐教，如何修改当前的页面！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>   {$PLUGIN_TITLE}  </title><script language="php">   $templateVersion = 2; // Template version   // $fieldRowLayout determines the layout of the form fields   // Options are 'fieldset' and 'table'   // fieldset: displays fieldnames above the input box   // table:    displays fieldnames in front of the input box   $fieldRowLayout = 'table';   // This JS file checks the form for required fields and correct syntax:   print '<scr' . 'ipt src="/x/plugin/plugin.js.php?' . htmlspecialchars($_SERVER['QUERY_STRING']) . '" type="text/javascript"></scr' . 'ipt>';</script>  <style type="text/css">html {	height: 100%;	width: 100%;	background: #FFFFFF; /* Old browsers */	font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; }body {	height: 100%;	width: 100%;	margin: 0;	border: 0;	background-position: center center;	-webkit-background-size: cover;	-o-background-size: cover;	-moz-background-size: cover;	background-size: cover;	font-size:12px; 	font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif;  	color:#333333; }body.box{	background-image: url(images/bg1.jpg);	background-color:#adc8db;}#main_bg{	position: absolute;	top: 40%;	left: 50%;	width: 20%;	height:10%;	text-align: left;	background-color: rgba(255, 255, 255, 0.8);    color: #333333;	margin:0 0 0 -176px; 	-webkit-box-shadow:0px 1px 2px #7d7d7d;    -moz-box-shadow:0px 1px 2px #7d7d7d;    box-shadow:0px 1px 2px #7d7d7d;	padding:50px;	background-color:#ECEFF1;}#logo{	position:absolute;	top: 32%;	left: 50%;	width: 172PX;	height: 43px;    margin:0 0 0 -176px; }#headerDiv,#titleDiv,#contentDiv,#footerDiv{	background-color: rgba(255, 255, 255, 0.8);     border:none;}td input{ width:234px;}label.req{display:none; width:0px;}div.explanation{display:none;}.input input{ background-image:url(/mailings/268/tmpl/438/images/input.jpg);                   width:70%; 				  height:36px; 				  font-size:14px; 				  font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; 				  color:#999999; 				  border:none; 				  padding-left:10px;}textarea{ background-color:#25282b; width:222px;  height:136px; border:none;}.buttons button{background-image:url(/mailings/268/tmpl/438/images/aniu1.png);                       width:97px; 				       height:39px;					   border:none;}p.buttons{ text-align:right;}					   				fieldset.odd, fieldset.even {    padding: 0px; 	margin:0px;	text-align:left;}</style> </head> <body class="box">  <div id="logo">   ?<img src="images/logo.png" alt="" />  </div>  <div id="main_bg">   <div class="editable">    plugin content goes here	<input type=text>   </div>  </div> </body></html>

Salin selepas log masuk

回复讨论(解决方案)

1，

上下左右居中于

   并且两个div 会随着浏览器的大小自动相对变化

既然要居中自然left right相等，top bottom相等，不需要使用width height。
#main_bg{
position: absolute;
top: 40%;
left: 40%;
right:40%;
    bottom:40%;
text-align: left;
background-color: rgba(255, 255, 255, 0.8);
    color: #333333;
margin:0 0 0 -176px;
-webkit-box-shadow:0px 1px 2px #7d7d7d;
    -moz-box-shadow:0px 1px 2px #7d7d7d;
    box-shadow:0px 1px 2px #7d7d7d;
padding:50px;
background-color:#ECEFF1;
}

2.

这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px

这个可以使用span contenteditalbe="true"来模拟input框，span可以随着长度增长改变。
#span {
        min-width:200px;
        border:  1px solid;
        display:block;
        white-space:nowrap;
        }