Question

我有一个带有徽标的标题下拉菜单和搜索栏问题是下拉按钮它已经关闭，我希望它能够启动。我有这样的方式：

但我想要这样的东西，其中按钮与徽标和搜索栏对齐：

我已经尝试了很多东西，例如在css中调用按钮类，并使用很多pxls的margin-button，但它的工作，任何建议？这是我的代码HTMl，我有按钮：

        <header>
        <nav class="navbar navbar-default navbar-custom" role="navigation">
            <div class="container">
                <a class="navbar-left" href="#"><img src="assets/img/logo-01.png" style="max-width:70px"/></a>
                <div class="navbar-header navbar-left">
                    <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>    

                    <div class="collapse navbar-collapse js-navbar-collapse">
            <ul class="nav navbar-nav">
                <div class="cd-dropdown-wrapper">
                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle cd-dropdown-trigger">Categorias</button>

                <nav class="cd-dropdown">

            <a href="#0" class="cd-close">Close</a>
            <ul class="cd-dropdown-content">

                <li class="has-children">
                    <a href="http://codyhouse.co/?p=748">Eletrodomésticos</a>

                    <ul class="cd-secondary-dropdown is-hidden">
                        <li class="go-back"><a href="#0">Menu</a></li>
                        <li class="see-all"><a href="http://codyhouse.co/?p=748">Todos os eletrodomésticos</a></li>
                        <li class="has-children">
                            <a href="http://codyhouse.co/?p=748">Eletrodomésticos</a>

                            <ul class="is-hidden">
                                <li class="go-back"><a href="#0">Eletrodomésticos</a></li>
                                <li class="see-all"><a href="http://codyhouse.co/?p=748">Todos os eletrodomésticos</a></li>
                                <!--<li class="has-children">-->
                                <li><a href="#0">Grandes Eletro de cozinha</a></li>

 ....<!--(has other categories but it doesnt matter for here so I skip that part)-->

                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Pesquisar Produto">
                        </div>
                        <button type="submit" class="btn btn-danger">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </form>
                </div>
                </div>
            </div>
        </nav>

    </header>

这是我的css代码：

.btn-default {
  margin-bottom: 350px;
  background: #25727D;
  border-color: #25727D;
  position: absolute;
  margin-left: 50px;
}

Answer 1

.btn-default {
            margin-bottom:350px;
            background: #25727D;
            border-color: #25727D;
            position:absolute;
            margin-left:50px;
        }

由于.btn-default已有position:absolute，因此只需相应更改top:10px或top:desiredValue即可更改按钮的垂直位置。

将按钮的位置更改为向上

1 个答案: