我是靠谱客的博主 傻傻手链,最近开发中收集的这篇文章主要介绍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标签加入图片然后定位最简单的例子所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

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

评论列表共有 0 条评论

立即
投稿
返回
顶部