我是靠谱客的博主 傻傻手链,这篇文章主要介绍input标签加入图片然后定位最简单的例子,现在分享给大家,希望可以做个参考。

<!doctype html>
 <html>
   <head>
    <meta charset="UTF-8">
    <title>input图标设置</title>
    <style type="text/css">
       div{
         width:200px;
         height:50px;
         background-color:red;
         position:relative
       }
       input{
         width:200px;
         height:50px;
         background-color:gray;
       }
       span{
         width:25px;
         height:25px;
         background-color:blue;
         position:absolute;
         top:12.5px;
         right:8px;
         
       }
   </style>
   </head>
   <body>
     <div>
       <input type="text"><span></span>
     </div>
   </body>

 </htlm>

首先新建一个容器包含inout标签,其后紧跟一个span标签然后嵌入图片;

容器设置定位为相对定位(relative),span标签设置为绝对定位(absolute),然后用top/left/bottom/right设置图片位置,span标签会直接显示在input标签的上面。



最后

以上就是傻傻手链最近收集整理的关于input标签加入图片然后定位最简单的例子的全部内容,更多相关input标签加入图片然后定位最简单内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(139)

评论列表共有 0 条评论

立即
投稿
返回
顶部