如何通过css设置2个li重叠在一起--请教

muyaoray 2009-08-28 04:36:06

<!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" />
<style type="text/css">
#div1 { position: relative; }

#text1{ position: absolute; left: 0; top: 0; font-size: 16px; }
/*#text2{ position: absolute; left: 0; top: 0; font-size: 10px; -moz-opacity:0;filter: alpha(opacity=0);opacity: 0; } */
#text2{ position: absolute; left: 0; top: 0; font-size: 16px; filter: Alpha(opacity=0);-moz-opacity:0;opacity:0;}
.textPasswd {
margin:0px;
PADDING:0px;
width: 35px;
float:left;
background-color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
border : 1px solid #7B9EBD;
}
ul.none {list-style-type: none}
.textPasswd1 {

margin:0px;
PADDING:0px;
width: 35px;
float:left;
background-color:#0066CC;
font-family:"Times New Roman", Times, serif;
border : 1px solid #7B9EBD;
/*-moz-opacity:0;
filter: alpha(opacity=0);
opacity: 0.2;*/
}

.div1 ul{
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none;
LINE-HEIGHT: normal;
list-style-type: none ;
}

. li1{
PADDING-LEFT:11px;
list-style-type: none ;
}
. li2{
position: absolute;
left: 0;
top: 20;
PADDING-LEFT:11px;
list-style-type: none ;
}
.textPasswd_label{

float:left;
}
.textPasswdHidd{

margin:0px;
PADDING:0px;
width: 35px;
float:left;
-moz-opacity:0;
filter: alpha(opacity=0);
opacity: 0.2;
background-color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
}
</style>
<script type="text/javascript" src="UI/ UIControl/ajax_lib_xml.js"> </script>
<script type="text/javascript">
function changeMark1()
{
var strvalue = document.getElementById('text2').value;
//var password = String.fromCharCode(e.keyCode);
document.getElementById('text1').value = strvalue.replace(/\S|\s/g,"*");
}

</script>
</head>
<body>
password:

<div id="div1">
<ul class="none">
<li class = "li1">
<input type="text" id="txtPassword1" maxlength = "4" class="textPasswd" ><label class="textPasswd_label">-</label>
<input type="text" id="txtPassword2" maxlength = "4" class="textPasswd"><label class="textPasswd_label">-</label>
<input type="text" id="txtPassword3" maxlength = "4" class="textPasswd"><label class="textPasswd_label">-</label>
<input type="text" id="txtPassword4" maxlength = "4" class="textPasswd">
</li>
<li class = "li2">
<input name="text" type="text" class="textPasswd1" maxlength = "4" onpropertychange="changeMark1(0)" />
<label class="textPasswd_label">-</label>
<input type="text" maxlength = "4" class="textPasswd1" onpropertychange="changeMark1(0)" ><label class="textPasswd_label">-</label>
<input type="text" maxlength = "4" class="textPasswd1" onpropertychange="changeMark1(0)" ><label class="textPasswd_label">-</label>
<input type="text" maxlength = "4" class="textPasswd1" onpropertychange="changeMark1(0)" >
</li></ul>
</div>
</body>
</html>

...全文