Javascript 引导将glyphicon包装在导航栏的第二行

我试图在我的引导网站上设置一个搜索框，当按下搜索图标时隐藏和显示（隐藏和显示部分工作），但当呈现输入框时，图标会移动到导航栏中的第二行：

这是我的代码：

<nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="index.php" class="navbar-brand"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="home nav-item">
                            <a href="index.php">
                                <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
                            </a>
                        </li>
                        <li class="products nav-item">
                            <a href="products.php">
                                <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> Products
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-item">
                            <a title="Search" class="search-button">
                                <div class="search"><input type="text" name="search" class="form-control" placeholder="Search..."></div>
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

我怎样才能解决这个问题？我对chrome控制台做了一些尝试，但没有找到解决方案

---

这是一个指向演示我的问题的JSFIDLE的链接：

添加

位置：绝对以搜索图标

.search-button .glyphicon-search{
  position:absolute;
  top:20px;
  right:0;
}

添加
位置：绝对位置以搜索图标

.search-button .glyphicon-search{
  position:absolute;
  top:20px;
  right:0;
}

默认情况下，div是
display:block
，这就是glyph图标被推入下一行的原因。尝试：

.search { display: inline-block; }

默认情况下，div是
display:block
，这就是glyph图标被推入下一行的原因。尝试：

.search { display: inline-block; }

如果可能的话，你能添加一个演示吗？好的！我会马上做：）如果可能的话，你能添加一个演示吗？好的！我会马上做的：）谢谢！这就是工作：）不客气！我认为Bootstrap也有一些类可以处理您的案例：谢谢！这就是工作：）不客气！我认为Bootstrap也有一些类可以处理您的案例：