What is the best way to position an image next to an input element?

Question

What is the best way to position an image next to an input element?

How can I position submit.png next to the input element in my code?

<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 tried using display: inline-block and float: right attributes as suggested in other articles, but it did not work. Can someone please assist me with this issue?

Please help me

html css

Answer 1

Answer №1

Although I'm not entirely certain if I grasped the question correctly, allow me to offer a solution utilizing the display: flex property.

<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>

If this solution doesn't meet your requirements, please let me know so that I can further assist you.

Here is a helpful guide on "Flex" for reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Although I'm not entirely certain if I grasped the question correctly, allow me to offer a solution utilizing the display: flex property.

<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>

If this solution doesn't meet your requirements, please let me know so that I can further assist you.

Here is a helpful guide on "Flex" for reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Answer №2

To arrange all elements in a div side by side horizontally, utilize the following CSS:

.container{
    display: flex;
 }

For vertical alignment at the center, apply the style shown below:

.container{
    align-items:center;
 }

Answer 4

To arrange all elements in a div side by side horizontally, utilize the following CSS:

.container{
    display: flex;
 }

For vertical alignment at the center, apply the style shown below:

.container{
    align-items:center;
 }

Answer 5

Answer №3

After setting the container's display to flex and adjusting the order of the items according to your specifications, I have also made sure that the input covers the entire width of the container. This will allow you to easily add margins to the items as needed. If you have any questions or need further assistance, please don't hesitate to reach out.

.input-box{
  display: flex;
  align-items: flex-end;
}

.input-box input{
  flex-grow: 1;
}

.input-box img:first-child{
  order: 3;
}

.input-box img:last-child{
  order: 2;
}

<div class="input-box" style="height: 40px; width: 500px;">
  <img src="img/delete.png" width="25px" height="25px;">
  <input id="answer" type="text" style="border: none; border-bottom: 2px solid silver; 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>

Answer 6

After setting the container's display to flex and adjusting the order of the items according to your specifications, I have also made sure that the input covers the entire width of the container. This will allow you to easily add margins to the items as needed. If you have any questions or need further assistance, please don't hesitate to reach out.

.input-box{
  display: flex;
  align-items: flex-end;
}

.input-box input{
  flex-grow: 1;
}

.input-box img:first-child{
  order: 3;
}

.input-box img:last-child{
  order: 2;
}

<div class="input-box" style="height: 40px; width: 500px;">
  <img src="img/delete.png" width="25px" height="25px;">
  <input id="answer" type="text" style="border: none; border-bottom: 2px solid silver; 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>

Answer 7

Answer №4

After some trial and error, I decided to implement a table layout for the solution I was working on.

<table style="border-spacing: 30px;">
            <tr>
                <td style="height: 40px; width: 500px;">
                    <img id="backspace" src="img/delete.png" width="25px" height="25px;" style="position: absolute; right: 95px; cursor: pointer;">
                    <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);">
                </td>
                <td>
                    <img id="submit" src="img/submit.png" width="35px" height="35px" style="cursor: pointer;">
                </td>
            </tr>
        </table>

Answer 8

After some trial and error, I decided to implement a table layout for the solution I was working on.

<table style="border-spacing: 30px;">
            <tr>
                <td style="height: 40px; width: 500px;">
                    <img id="backspace" src="img/delete.png" width="25px" height="25px;" style="position: absolute; right: 95px; cursor: pointer;">
                    <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);">
                </td>
                <td>
                    <img id="submit" src="img/submit.png" width="35px" height="35px" style="cursor: pointer;">
                </td>
            </tr>
        </table>

What is the best way to position an image next to an input element?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to showcase an HTML body in the Gmail app on iOS?

The results from various <div> elements are displayed based on the selection made from the dropdown menu

Interactive pop-up window featuring conversational chat boxes

Content positioned beside an image with the help of Bootstrap 4 framework

When viewing my website on a mobile device in landscape mode, the CSS divs sized at 20% do not match the size of the div set at

Processing PHP forms with dynamic form inputs

Enable a single column to scroll until the content is fully displayed, and then stay in a fixed position

SQL query for finding the number of shared nodes between two given nodes

pressure exerted on the body

Execute a JavaScript function when an HTML list element is clicked

What is the process for manually looping an HTML5 video on iOS 4.3/5?

Is there a way to ensure consistent heights for various elements within a column, even if their heights are

Avoid the CSS ::before content from being highlighted

Looping through color transitions upon hover using CSS

The link that has been clicked on should remain in an active state

Is there a way to access comprehensive data pertaining to an ID through Ajax?

Fetching large images with "fill" layout in NextJS

Footer remains fixed and scrolls into the body when the window is resized

App.controller attributes in HTML tags are not receiving the value of the HTML variable

Issues with properly functioning collapse button in Bootstrap 5.1.3 Navigation Bar