使img和输入正确排队并在html中向右浮动

Question

我想要一个相对简单的navbar，它有一个搜索图标。单击该图标会在其左侧显示隐藏的搜索输入。

在尝试使用“浮动”或“白色空间”等其他解决方案后，我尝试遵循这里的建议。

如果查看点击后图片，您会看到图片的宽高比发生了变化。

这样做的正确方法是什么？

代码：

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

在.row display: flex和justify-content: flex-end内设置第二个div，将内容设置在右侧。

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

<强>的JavaScript

向click元素添加事件侦听器。每次单击元素时，目标元素都会切换。切换el.classList.toggle(cssClass)

没有效果的例子

＆＃13;

＆＃13;

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");

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有效的示例

＆＃13;

＆＃13;

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");

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>