<html>
<head>
<style>
#div1{
width:600px
height:40px
font-size:13px
}
#div1 p,span{ //通过一个‘,’实现对2个同级子元素的选取
display:block
width:300px
height:30px
text-align:center
margin:0 auto
}
</head>
<body>
<div id='div1'>
<p>我是测试文字</p>
<span>我是测试文字1</span>
</div>
</body>
</html>
css中的绝对定位,意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。
css中的相对定位,意思是是相对于上一个相对定位的,总是相对于前面的同级标签为基准标签。
不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位,设置后,原来的位置始终保留着。绝对定位,设置后,原来的位置会被后面的内容占据。
你可以让span相对于div来定位啊,这样就不用管input的长度和位置了。当然,input也要通过设置text-indent来给span腾出位置。下面是个简单的实现例子(为了方便,我用了内联的css,你可以改成外联的):
<div style="position:relative"><input type="text" id="xj_zhanghao" class="xj_text" maxlength="16" style="text-indent:20px" placeholder="账号" onKeyUp="xjzhltishi()" onFocus="qcxjtishi()"/><span id="xjzhtishi" style="position:absolute left:3px top:3px width:14px padding:1px line-height:1 text-align:center background-color:red color:white font-size:11px border-radius:2px">99</span></div>