Question 208954 in Html Question posted in
Some basic documentation can be found here.

Html – How to put image next of input element?

I want to put submit.png next to the input element.
This is the code i use:

<div class="input-box" style="height: 40px; width: 500px;">
            <img src="img/delete.png" width="25px" height="25px;" style="position: absolute; right: 0;">
            <input id="answer" type="text" style="border: none; border-bottom: 2px solid silver; height: 100%; width: 100%; font-size: 17px; background-color: #ffffff00; outline: none; color: white; font-weight: bold; text-align: center;" required readonly oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);">
            <img src="img/submit.png" width="25px" height="25px">
        </div>

I have read other article that said i need to use display: inline-block and float: right attribute.
I have try that and still didn’t work.

Please help me

Tags:

2

Answers


  1. 0

    I’m not 100% sure if I understood the question but here is a solution with display: flex.

    <div class="input-box" style="height: 40px; width: 500px; display: flex;">
    <img src="https://picsum.photos/200" width="25px" height="25px;" style="position: absolute; right: 0;">
    <!-- INPUT FIELD -->
    <input id="answer" type="text" style="border: none; border-bottom: 2px solid silver; height: 200px; width: 200px; font-size: 17px; border: 1px solid red; background-color: #ffffff00; outline: none; color: white; font-weight: bold; text-align: center;" required readonly oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);">
    <!-- SUBMIT -->
    <img src="https://picsum.photos/200" width="25px" height="25px">
</div>

    Let me know if that helps.

    Check this nice tutorial about "Flex".
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
  2. 0

    you can use css below to put all elements in a div next to each other horizontally:

    .input-box{
    display: flex;
 }

    you can also use style below to align them vertically to the center:

    .input-box{
    align-items:center;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search