Question

我有一个带有徽标的标题下拉菜单和搜索栏问题是下拉按钮它已经关闭了我想要它。我有这样的方式：

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

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

<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>
    </div>
  </ul>
</div>

这是我的css代码：

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

＆＃13;

.navbar-custom {
  color: #FFFFFF;
  background-color: #283133;
}

.navbar-custom .navbar-nav>li>a {
  color: #FFFFFF;
}

.navbar-header {
  max-height: 60px;
}

.form-group {
  margin: auto;
}

.navbar-nav {
  margin-left: 200px;
}

.navbar-left {
  margin-left: 30px;
}

.navbar-form {
  margin-left: 550px;
  margin-bottom: 170px;
  position: absolute;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus,
.btn {
  background: #25727D;
  border-color: #25727D;
}

.btn-default {
  margin-bottom: 350px;
  background: #25727D;
  border-color: #25727D;
  position: absolute;
  margin-left: 50px;
}

＆＃13;

<!DOCTYPE html>
<html lang="pt-pt">

<head>
  <!-- Latest compiled and minified CSS -->

  <!-- Latest compiled JavaScript -->
  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="assets/js/jquery-2.1.1.js"></script>

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="assets/js/bootstrap.min.js"></script>
  <link href="assets/css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/reset.css">
  <!-- CSS reset -->
  <link rel="stylesheet" href="assets/css/co.css">
  <!-- Resource style -->

  <script src="assets/js/main.js"></script>
  <script src="assets/js/jquery.menu-aim.js"></script>
  <!-- menu aim -->
  <script src="assets/js/modernizr.js"></script>
  <!-- Modernizr -->




</head>

<body>

  <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">


          <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>




                <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>

＆＃13;

Answer 1

因为您使用的是绝对定位。 您可以使用css的top属性将其放在页面顶部。

而不是使用边距，

margin-bottom: 350px;

使用

top:5px; /*adjust to your preference*/

有更简单的方法来创建标题。

这里是一个jsFiddle：https://jsfiddle.net/xpvt214o/160211/

希望有所帮助。

Answer 2

您可以尝试制作这样的HTML，看看它是否有效！也许这只是一个定位问题。将按钮移动到导航栏所在的位置应该这样做。

<!-- Latest compiled JavaScript -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery-2.1.1.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<link href="assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/reset.css">
<!-- CSS reset -->
<link rel="stylesheet" href="assets/css/co.css">
<!-- Resource style -->

<script src="assets/js/main.js"></script>
<script src="assets/js/jquery.menu-aim.js"></script>
<!-- menu aim -->
<script src="assets/js/modernizr.js"></script>
<!-- Modernizr -->

<header>
  <nav class="navbar navbar-default navbar-custom" role="navigation">
    <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>

        </div>
      </ul>

      <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">
          <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>

按钮未与标题对齐

2 个答案: