Question

我有一个搜索框，我在其中显示右侧的Bootstrap glyphicon。在我的搜索框旁边，我有一个简单的

标签，显示搜索结果的数量。在添加glyphicon之前，所有内容都已正确排列。我不能为我的生活弄清楚为什么添加glyphicon会抛弃下一个元素。这可能是我发布给SO的最简单的事情，但是迄今为止最让我感到疯狂的事情。

我的HTML：

<div class="main-wrap">
            <h1>Search Results for "undergraduate"</h1>
            <div class="search-holder">
                <div class="right-inner-addon">
                    <input type="search" class="results"></input>
                    <i class="glyphicon glyphicon-search"></i>
                    <p>248 Results</p>
                </div><!--end right-inner-addon-->
            </div><!--end search-holder-->
        </div><!--end main-wrap-->

我的CSS：

.template-f {
  padding: 100px 0px;
}

.template-f .search-holder {
  width: 630px;
  height: auto;
  max-width: 95%;
  padding-top: 50px;
  position: relative;
}

.template-f .search-holder .right-inner-addon {
  position: relative;
  width: 80%;
}

.template-f .search-holder .right-inner-addon .search-crate {
  width: 100%;
  height: 40px;
  position: relative;
}

.template-f .search-holder .right-inner-addon p {
  display: inline-block;
  padding-left: 10px;
  vertical-align: bottom;
}

.template-f .search-holder .right-inner-addon i {
  position: absolute;
  right: 15px;
  padding: 10px 12px;
  pointer-events: none;
  color: #003366;
}

在这里会有所帮助...

使用Bootstrap Glyphicon进入＆＃39;输入＆＃39;盒子扭曲其他元素

0 个答案: