使img和输入正确对齐，并在html中浮动到右侧
使img和输入正确对齐，并在html中浮动到右侧
提问于 2018-06-04 01:42:13
我想要一个相对简单的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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 04:54:00
这段代码有用吗？
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()">🔎</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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50669238
复制相关文章
相似问题