Сделайте img и правильно выровняйте строку ввода в HTML.

Question

Я хочу относительно простой navbar, у которого справа есть значок поиска.Нажатие на значок открывает скрытый поисковый ввод слева от него.

Я попытался последовать этому совету после того, как разочаровался в некоторых других решениях, таких как игра с «float» или «white-space».

Если вы посмотрите на изображение после щелчка, то увидите, что соотношение сторон изображения изменилось.

Как правильно это сделать?

Код:

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>

Answer 1

Используйте flexbox для макета.Если вы хотите иметь одинаковую ширину, используйте flex: 1

Структура

HTML

<div class="row">
  <div>50%</div>
  <div>50%
    <input ...>
    <button><img ...></button>
  </div>
</div>

CSS

.row {
  display: flex;
}

.row > div {
  flex: 1;
}

Сделайте второй div внутри .row, также display: flex и justify-content: flex-end, чтобы установить содержимое справа.

.row > div:nth-child(2) {
  display: flex;
  justify-content: flex-end;
}

JavaScript

Добавьте прослушиватель событий к элементу click.Каждый раз, когда вы щелкаете элемент, целевой элемент переключается.Переключение с el.classList.toggle(cssClass)

---

Пример без эффекта

function myToggle(clickElId, targetElId, cssClass) {
  var clickEl = document.getElementById(clickElId),
    targetEl = document.getElementById(targetElId);
  clickEl.addEventListener("click", function() {
    targetEl.classList.toggle(cssClass);
  });
}

myToggle("searchButton", "mySearch", "hide");

/* Flexbox */

.flex {
  display: flex;
}

.flex.is-right {
  justify-content: flex-end;
}

.flex.is-v-centered {
  align-items: center;
}

.flex.equal>* {
  flex: 1;
}


/***/

#topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  padding: 0 15px;
  height: 40px;
}

#topnav a {
  color: white;
  text-decoration: none;
}

#mySearch,
#searchButton {
  display: block;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#mySearch {
  margin-right: 5px;
}


/* Hide search input without effect */

.hide {
  display: none !important;
}


/* Hide search input with effect */

.width-0 {
  width: 0;
  padding: 0;
  border: none;
  transition: width .3s ease;
}

.expand-200 {
  width: 200px;
}

<div id="topnav">
  <ul class="flex equal is-v-centered">
    <li><a href="#home">Top Questions</a>
    </li>
    <li class="flex is-right is-v-centered">
      <div>
        <form class="flex" onsubmit="return false;">
          <input type="text" id="mySearch" class="hide expand-200" placeholder="Search...">
          <!-- <img src="search-icon-24.png" alt="" id="searchicon">-->
          <button id="searchButton"><img src="http://via.placeholder.com/30x30" alt=""></button>
        </form>
      </div>
    </li>
  </ul>
</div>

Пример с эффектом

function myToggle(clickElId, targetElId, cssClass) {
  var clickEl = document.getElementById(clickElId),
    targetEl = document.getElementById(targetElId);
  clickEl.addEventListener("click", function() {
    targetEl.classList.toggle(cssClass);
  });
}

myToggle("searchButton", "mySearch", "expand-200");

/* Flexbox */

.flex {
  display: flex;
}

.flex.is-right {
  justify-content: flex-end;
}

.flex.is-v-centered {
  align-items: center;
}

.flex.equal>* {
  flex: 1;
}


/***/

#topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  padding: 0 15px;
  height: 40px;
}

#topnav a {
  color: white;
  text-decoration: none;
}

#mySearch,
#searchButton {
  display: block;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#mySearch {
  margin-right: 5px;
}


/* Hide search input without effect */

.hide {
  display: none !important;
}


/* Hide search input with effect */

.width-0 {
  width: 0;
  padding: 0;
  border: none;
  transition: width .3s ease;
}

.expand-200 {
  width: 200px;
}

<div id="topnav">
  <ul class="flex equal is-v-centered">
    <li><a href="#home">Top Questions</a>
    </li>
    <li class="flex is-right is-v-centered">
      <div>
        <form class="flex" onsubmit="return false;">
          <input type="text" id="mySearch" class="width-0" placeholder="Search...">
          <!-- <img src="search-icon-24.png" alt="" id="searchicon">-->
          <button id="searchButton"><img src="http://via.placeholder.com/30x30" alt=""></button>
        </form>
      </div>
    </li>
  </ul>
</div>

Answer 2

Этот код помогает?

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>