input标签加入图片然后定位最简单的例子

最新推荐文章于 2024-07-04 15:59:29 发布

aa2635aaa

最新推荐文章于 2024-07-04 15:59:29 发布

阅读量2.8k

点赞数 1

分类专栏： HTMLCSS

HTMLCSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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标签的上面。