关闭

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

325人阅读 评论(0) 收藏 举报

假设我们有一个供输入的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标签内部的效果。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2083次
    • 积分:52
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档