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

来源：互联网发布：淘宝贷款官网编辑：程序博客网时间：2024/05/21 09:38

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

阅读全文

0 0