1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Title</title>6 </Head>7 <Body>8 9 <Divstyle= "height:600px;width:1500px;border:1px solid darkgray;margin:0 auto;margin-top:200px">Ten <Divstyle= "width:400px;height:35px;position:relative;margin:0 auto;margin-top:300px"> One A <inputtype= "text"style= "width:370px;height:35px;padding-right:30px"> - - <spanstyle= "Background-image:url (i_name.jpg); width:16px;height:16px;display:inline-block;position:absolute;top:11px; right:1px "></span> the - </Div> - - </Div> + - </Body> + </HTML>
Attention:
<input type= "text" style= "width:370px;height:35px;padding-right:30px" >
In this sentence padding-right let the input box move to the right 30 pixel width reduced by 30 pixels plus it's still 400 pixels and the div pixel as large but the user input character won't cover the icon of the villain on our right.
HTML +css Login box to add user pictures, and set the login name does not cover the icon