javascript - 在一行中显示搜索表单和导航栏菜单项

Question

我想在一行中显示搜索表单和导航栏菜单项，而现在它显示在两行中。

HTML:

<title>This is test</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="animate.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap-carousel.js"></script> 
<script src="js/modern-business.js"></script> 
<!-- Navigation -->
<header id="header">
    <div class="top-bar">
        <div class="container">
            <div class="row">

                 <div class="col-md-4 col-md-offset-3">
        <form action="" class="search-form">
            <div class="form-group has-feedback">
                <label for="search" class="sr-only">Search</label>
                <input type="text" class="form-control" name="search" id="search" placeholder="search">
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
        </form>
    </div>

                <div class="col-sm-6 col-xs-8">

                <ul class="nav navbar-nav navbar-right">
                   <li><a href="#">My Account</a></li>
                   <li><a href="#">Sign In</a></li>
                   <li><a href="#">Create Account</a></li>
                   <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</a></li>
               </ul>

                   </div>
                </div>

        </div><!--/.container-->
    </div><!--/.top-bar-->

CSS:

 #header .search{
 display: inline-block;
 }

 .navbar>.container .navbar-brand{
   margin-left: 0;
   }

  .top-bar {
   padding: 10px 0;
   background: #191919;
   border-bottom: 1px solid #222;
   line-height: 28px;
   }

 .search i {
  color: #fff;
  }

 input.search-form{
 background: transparent;
  border: 0 none;
 width: 60px;
  padding: 0 10px;
 color: #FFF;
 -webkit-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;
 transition: all 400ms;
}


 .search-form .form-group {
  float: right !important;
  transition: all 0.35s, border-radius 0s;
  width: 32px;
  height: 32px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
   border: 1px solid #ccc;
   }
  .search-form .form-group input.form-control {
   padding-right: 20px;
   border: 0 none;
   background: transparent;
   box-shadow: none;
   display:block;
   }
  .search-form .form-group input.form-control::-webkit-input-placeholder {
   display: none;
   }
  .search-form .form-group input.form-control:-moz-placeholder {
   /* Firefox 18- */
   display: none;
   }
  .search-form .form-group input.form-control::-moz-placeholder {
 /* Firefox 19+ */
  display: none;
  }
  .search-form .form-group input.form-control:-ms-input-placeholder {
   display: none;
    }
    .search-form .form-group:hover,
   .search-form .form-group.hover {
    width: 100%;
     border-radius: 4px 25px 25px 4px;
     }
    .search-form .form-group span.form-control-feedback {
    position: absolute;
    top: -1px;
     right: -2px;
     z-index: 2;
    display: block;
    width: 34px;
     height: 34px;
    line-height: 34px;
     text-align: center;
     color: #3596e0;
    left: initial;
     font-size: 14px;

如何在一行而不是两行中同时显示导航栏菜单项和动画搜索表单。

这是 jsfiddle link

感谢您的帮助。

Answer 1

我会将此作为评论查询发布，但缺少代表。

是否换行

.search-form .form-group {
  float: right !important;
}

到

.search-form .form-group {
  float: left !important;
}

如本 fiddle 所示 https://jsfiddle.net/pLvp7ru0/6/几乎解决你的问题？这似乎有点太快了，所以我很可能误解了这个问题。