实现包含“确定”按钮的输入框

假设我们有一个供输入的span标签:

<span class="text">

                             <div class="put">请输入:&nbsp;&nbsp;</div>

                        <divclass="input">

                        <inputtype="text" name="putClothNo" id="putClothNo"/>

                                 <span class="yes">确定</span>

                        </div>

                    </span>

那么我们的css样式应该是这样:

         /*整个span标签*/

         .text{width:500px; text-align:left; padding-left:10px; background:none;}

         /*设置这个span标签中input标签的属性这里的padding-right设置主要是为了空出位置给后面的“确定”按钮*/

         .textinput{width:200px; height:20px; padding-right:10px;}

         /*将class为input的div设置为相对定位时的父容器*/

         .text.input{ width:auto; height:100%; float:left; margin-top:3px;position:relative;}

         .text.put{ width:auto; height:100%; float:left;}

         /*设置“确定”按钮相对定位*/

         .text.yes{ font-size:10px; position:absolute; top:1px; left:171px; width:30px;background:#CCC; height:20px; line-height:20px;}

 

 

这里主要是用了相对定位来使“确定”按钮相对父容器定位，达到“确定”按钮处于input标签内部的效果。