在表单输入后显示图标图像

Question

我试图在导航栏中显示一些图标。

这没关系：

<nav class="navbar navbar-default as-sub-navbar">
    <div class="container-fluid">
        <div id="navbar">
            <div class="col-md-3 pull-right">
                <ul class="nav navbar-nav">
                    <li><img class="as-search-icon" src="~/Content/img/search.png"></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li><img class="as-search-icon" src="~/Content/img/circle_delete_dark.png"></li>
                </ul>
                <form class="navbar-form as-sub-navbar-search-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control as-sub-navbar-search-bar" placeholder="Search" name="srch-term" id="srch-term">
                    </div>
                </form>
            </div>

        </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

但是当我试图移动＆＃34; x＆＃34;搜索栏后面的图像显示在新行上：

<div class="col-md-3 pull-right">
    <ul class="nav navbar-nav">
        <li><img class="as-search-icon" src="~/Content/img/search.png"></li>
    </ul>
    <form class="navbar-form as-sub-navbar-search-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control as-sub-navbar-search-bar" placeholder="Search" name="srch-term" id="srch-term">
        </div>
    </form>
    <ul class="nav navbar-nav">
        <li><img class="as-search-icon" src="~/Content/img/circle_delete_dark.png"></li>
    </ul>
</div>

有人知道如何将它们放在同一条线上吗？

CSS：

.as-sub-navbar-search-form{
    margin-top:0px;
}

.as-sub-navbar-search-bar{
    background-color:rgb(233, 234, 235);
    height: 40px;
}

.as-search-icon {
   margin-top: 12px;
}

Answer 1

您需要float搜索字段，因此例如将float:left;添加到.navbar-form。

.navbar-form {
    float: left;
}

See my example here.