Make img and input line up properly and float to right in html

Jeff Saremi

I want a relatively simple navbar which has a search icon to it's right. Clicking on the icon exposes a hidden search input to its left.

I tried following the advice here after getting frustrated with some other solutions such as playing with "float" or "white-space".

If you look at the after-click picture you'll see that the aspect ratio of the image has changed.

What is the right way to do this?

Code:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

<div id="topnav">
  <ul>
    <li><a href="#home">Top Questions</a></li>
    <li style="float:right;">
      <div style="display:flex;flex-direction:row">
        <form><input type="search" id="mySearch" placeholder="Search..." style="display:none;width:200px"></form>
        <img src="search-icon-24.png" alt="" id="searchicon" />
      </div>
    </li>
  </ul>
</div>

Brendan

Does this code help?

function TQ() {
var a = document.getElementById("test");
a.style.display = "block"
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
    }
    
    li {
    	float: left;
    }
    #test {
    display: none
    }

<!DOCTYPE html>
<html>

<div id="topnav">
	<ul>
    <li><a href="#home">Top Questions</a></li>
	<li style="float:right"><a href="javascript:void(0);" onclick="TQ()">&#128270;</a></li>
		
		<li style="float:right;">
			<div id="test">					
				    <form><input type="search" id="mySearch" placeholder="Search..." style="width:200px"></form>
                    
				
			</div>
		</li>
	</ul>
    

    
    </div>



</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.