Html 如何将图像和搜索栏对齐成一行？
我在我的表格上添加了Html 如何将图像和搜索栏对齐成一行？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我在我的表格上添加了20%的left，因为我想让我的徽标适合，但显然，额外的空间仍然存在，因此我的徽标位于搜索栏上方。我正在使用twitter引导 我该如何移除那个橙色的盒子，因为那里显然还有空间 说明 我希望粉红色的空间消失，这样我的标志就可以在那个位置 这是JS小提琴 将结果框放大，以查看完整示例 .sbx亚马逊{ 显示：内联块； 位置：相对位置； 宽度：600px； 高度：39px； 空白：nowrap； 框大小：边框框； 字体大小：14px； 边缘顶部：6px； } .sbx-am
20%left.sbx亚马逊{
显示：内联块；
位置：相对位置；
宽度：600px；
高度：39px；
空白：nowrap；
框大小：边框框；
字体大小：14px；
边缘顶部：6px；
}
.sbx-amazon__包装器{
宽度：100%；
身高：100%；
}
.sbx-amazon_输入{
显示：内联块；
-webkit过渡：盒子阴影。4s轻松，背景。4s轻松；
过渡：方块阴影。4s轻松，背景。4s轻松；
边界：0；
边界半径：4px；
框阴影：插入0 1px#FFFFFF；
背景：#FFFFFF；
填充：0；
右边填充：75px；
左侧填充：11px；
宽度：100%；
身高：100%；
垂直对齐：中间对齐；
空白：正常；
字体大小：继承；
-webkit外观：无；
-moz外观：无；
外观：无；
}
.sbx-amazon_uu输入：：-webkit搜索装饰，.sbx-amazon_u输入：：-webkit搜索取消按钮，.sbx-amazon_u输入：：-webkit搜索结果按钮，.sbx-amazon_u输入：：-webkit搜索结果装饰{
显示：无；
}
.sbx-amazon__输入：悬停{
框阴影：插入0 1px#e6；
}
.sbx-amazon\u输入：焦点，.sbx-amazon\u输入：活动{
大纲：0；
盒影：插入0 1px#FFBF58；
背景：#FFFFFF；
}
.sbx-amazon_uu输入：：-webkit输入占位符{
颜色：#AAAAA；
}
.sbx-amazon__输入：：-moz占位符{
颜色：#AAAAA；
}
.sbx-amazon_uu输入：-ms输入占位符{
颜色：#AAAAA；
}
.sbx-amazon__输入：：占位符{
颜色：#AAAAA；
}
.sbx-亚马逊提交{
位置：绝对位置；
排名：0；
右：0；
左：继承；
保证金：0；
边界：0；
边界半径：0 3px 3px 0；
背景色：#ffbf58；
填充：0；
宽度：47px；
身高：100%；
垂直对齐：中间对齐；
文本对齐：居中；
字体大小：继承；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.sbx-amazon__提交：：之前{
显示：内联块；
右边距：-4px；
身高：100%；
垂直对齐：中间对齐；
内容：''；
}
.sbx-amazon\u提交：悬停，.sbx-amazon\u提交：活动{
光标：指针；
}
.sbx-亚马逊提交：聚焦{
大纲：0；
}
.sbx-amazon__提交svg{
宽度：21px；
高度：21px；
垂直对齐：中间对齐；
填充：#202F40；
}
.sbx-amazon\u重置{
显示：无；
位置：绝对位置；
顶部：9px；
右：54px；
保证金：0；
边界：0；
背景：无；
光标：指针；
填充：0；
字体大小：继承；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
填充：rgba（0,0,0,0.5）；
}
.sbx-amazon_uu重置：焦点{
大纲：0；
}
.sbx-amazon__重置svg{
显示：块；
保证金：4倍；
宽度：13px；
高度：13px；
}
.sbx-amazon\u输入：有效~.sbx-amazon\u重置{
显示：块；
-webkit动画名称：sbx在中重置；
动画名称：sbx复位输入；
-webkit动画持续时间：.15s；
动画持续时间：.15s；
}
@-webkit关键帧sbx在中重置{
0% {
-webkit转换：translate3d（-20%，0，0）；
转换：translate3d（-20%，0，0）；
不透明度：0；
}
100% {
-webkit转换：无；
转化：无；
不透明度：1；
}
}
@关键帧sbx在中重置{
0% {
-webkit转换：translate3d（-20%，0，0）；
转换：translate3d（-20%，0，0）；
不透明度：0；
}
100% {
-webkit转换：无；
转化：无；
不透明度：1；
}
}
切换导航
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search bar Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.fit-img{
width:45px;
height:50px;
}
.navbar-brand{
padding-top:0;
padding-bottom:0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="color:#f5f5f5;"><img src="Koala.jpg" class="fit-img"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" style="width:400px;border-radius:0;">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" style="border-radius:0;">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
output image
你的小提琴坏了。当我按下导航按钮时，它不会将结果框拖到左侧，然后您将看到完整的结果。请清除您所说的橙色框，我看不到任何橙色框。@imSayan如果您检查表单，您可以看到表单也占据了左侧的空间。你可以看到橙色box@sinusGob，现在我理解了你的问题，你的搜索栏是这样的，我如何使图像适合导航栏<代码>@我的回答对你有帮助吗
## Feel free to ask any question ##
[1]: https://i.stack.imgur.com/ck0i6.png