Html 是什么让我的搜索栏位于中心？_Html_Css_Searchbar

Html 是什么让我的搜索栏位于中心？

html css

Html 是什么让我的搜索栏位于中心？,html,css,searchbar,Html,Css,Searchbar,我试图让我的搜索栏位于我的菜单上方，但它似乎位于页面的中心。我不确定是什么把它压在我的菜单栏div下面，但我怀疑它是CSS中的某个东西，因为从技术上讲，搜索栏与徽标应该放在同一行上。我已经将行划分为两列，一列是小col-sm-3，另一列是宽度为9 所以我希望它看起来像这样：但现在看起来是这样的：这是我的html：  <div class="container"> <div class="ro

我试图让我的搜索栏位于我的菜单上方，但它似乎位于页面的中心。我不确定是什么把它压在我的菜单栏div下面，但我怀疑它是CSS中的某个东西，因为从技术上讲，搜索栏与徽标应该放在同一行上。我已经将行划分为两列，一列是小col-sm-3，另一列是宽度为9

所以我希望它看起来像这样：

但现在看起来是这样的：

这是我的html：

<!--Fixed Search Bar-->
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <h5>Insert Logo</h5>
            </div>
            <div class="col-sm-9">
                <div class="wrap">
                    <div class="search">
                        <input type="text" class="searchTerm" placeholder="What are you looking for?">
                        <button type="submit" class="searchButton">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--End of Fixed Search Bar-->


    <!--Menu-->
    <div id="cssmenu">
        <ul>
            <li class="active"><a href="#" target="_blank"><span><i class="fa fa-fw fa-home"></i> Home</span></a></li>
            <li><a href="#"><span><i class="fa fa-fw fa-comment-o"></i> Messages</span></a></li>
            <li><a href="#"><span><i class="fa fa-fw fa-bell-o"></i> Notifications</span></a></li>
            <li class="has-sub">
                <a href="#"><span><i class="fa fa-fw fa-user"></i> My Account</span></a>
                <ul>
                    <li><a href="#"><span><i class="fa fa-fw fa-gear"></i> Settings & Preferences</span></a></li>
                    <li><a href="#"><span>Billing & Subscriptions</span></a></li>
                    <li><a href="#"><span><i class="fa fa-fw fa-plus-circle"></i> Paid Features & Power Profile</span></a></li>
                    <li><a href="#"><span><i class="fa fa-fw fa-search"></i> Searching & Matching</span></a></li>
                    <li><a href="#"><span>Start a Company Page</span></a></li>
                    <li><a href="#"><span><i class="fa fa-fw fa-sign-out"></i> Log-Out</span></a></li>
                </ul>
            </li>
            <li class="has-sub">
                <a href="#"><span>Need Help?</span></a>
                <ul>
                    <li><a href="#"><span>Submit a Request</span></a></li>
                    <li><a href="#"><span>Dispute a Review</span></a></li>
                    <li><a href="#"><span>FAQs</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>About Us</span></a></li>
        </ul>
    </div>


    <!--End of Menu-->

包含搜索类的div上方div中的wrap类导致了此问题

改变

            <div class="wrap">
                <div class="search">
                    <input type="text" class="searchTerm" placeholder="What are you looking for?">
                    <button type="submit" class="searchButton">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

到

包含搜索类的div上方div中的wrap类导致了此问题

改变

            <div class="wrap">
                <div class="search">
                    <input type="text" class="searchTerm" placeholder="What are you looking for?">
                    <button type="submit" class="searchButton">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

到

试试这个：

CSS

.wrap {
    width: 30%;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

注意：您可以更改搜索栏的宽度和顶部大小…只需使用它即可

[更新]

我不确定是什么迫使它落在我的菜单栏下面：

强制执行的是您的

.wrap

类使用以下规则：

 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);