<p> There are <input> and <img> tags implemented using <span> tags. But when you zoom in on the screen, the <img> tag falls down. What should I do to make it stick to Hanline?

    <form class="menu_content_search" action="/action_page.php" style="margin-top: 12px">
      <p><span><input type="text" name="q" placeholder="search" style="height:42px;margin-top: 2px"><img src="img/search.png" style="margin-top: -4px" value="Submit" onclick="#"></span></p>
      <!-- <input type="submit"> -->
      <!-- <button id="search_btn"></button> -->
    </form>
</div>

It's the sauce part~

This is the link that I made Link name

If you go in, there's an input window at the top of the navbar I put a magnifying glass image next to that part, but if you reduce the window area, the image falls down

How do we solve this problem?

I tried to tag it and make it visible on one line, but it didn't work

Tell me how to do I do it~~~ Please~

span p tag input img

2022-09-22 18:37

1 Answers

If you check with the browser developer tool, The resulting width required by navbarform is approximately 219px. But The width property of the navbar form is set to 16%. The calculation that is 16% is .Calculation of the width (automatically calculated for the entire window area) of the navbar. So if you shorten the window too much and the final calculation value for 16% is less than 219px, the layout is broken as it is now.

Once you fix it like this, you'll get the desired effect.

.navbar form {
    /* width: 16%; */* <-- Take this out */
    margin-right: 0% !important;
    Display: inline-block; /* <-- Put this in. */
}

2022-09-22 18:37

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656