Question

我的导航栏出现问题，导航栏包含4个图标和一个搜索栏。我希望搜索图标显示在搜索栏之后，但此时它被强制显示在新行上，我不确定原因。

网站：explorecanterbury.co.uk

HTML / CSS：

＆＃13;

.form-control {
  width:230px;	
  margin-top: 7px;
}

.navbar{
  max-width: 415px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .navbar{
    width: 75px;
  }
}

.navbar-collapse{
  padding-right: 0px;
  padding-left: 0px;
}
.nav > li {
  padding: 5px;
  margin-top:8px;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 150, 0, 0.15);
}

.nav > li:last {
  border-right: none;
}

.navbar-default {
  background-color: #fff;
  border-color: rgba(255, 150, 0, 0.15);
}

.nav-toggle-2 {
  width: 24px;
  height: 24px;
  display: block;
}

.nav-toggle-3 {
  width: 24px;
  height: 24px;
  display: block;
}
.LocIcon {
  background-image:url(/images/select.png);
  width:24px;
  height:24px;
  display: block;
}

.photosIcon {
  background-image:url(/images/photos.png);
  width:24px;
  height:24px;
  display: block;
}

.infoIcon {
  background-image:url(/images/information.png);
  width:24px;
  height:24px;
  display: block;
}
.searchIcon {
  background-image:url(/images/search.png);
  width:24px;
  height:24px;
  display: block;
}

＆＃13;

<nav class="navbar navbar-default" style="z-index:5;">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li>
      <ul class="dropdown-menu">
        <li><a id="mgtoggle" class="small toggle" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Museums and Galleries</a></li>
        <li><a id="landmarktoggle" class="small toggle" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Landmarks</a></li>
        <li><a id="shoppingtoggle" class="small toggle" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Shopping</a></li>
        <li><a id="hotelstoggle" class="small toggle" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Hotels + Bed &amp; Breakfast</a></li>
        <li><a id="churchestoggle" class="small toggle" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Churches</a></li>
        <li><a id="tourstoggle" class="small toggle" data-value="option7" tabIndex="-1"><input type="checkbox"/>&nbsp;Tours and Guides</a></li>
      </ul>
      <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
      <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>

    </ul>
    <div class="searchBar">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" id="srch-term">

      </div>
      <span class="searchIcon hidden-xs"></span>
    </div>

  </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

＆＃13;

Answer 1

我和一名检查员在你的网站上搞砸了，这就是我想出来的：

.input-group {
    position: relative;
    display: inline-block;
    border-collapse: separate;
    width: 65%;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 80%;
    margin-bottom: 0;
}

.searchIcon {
    background-image: url(/images/search.png);
    width: 24px;
    height: 24px;
    margin: 12px 5px;
    display: inline-block;
    float: left;
}

<div class="input-group">
  
  <input type="text" class="form-control ui-autocomplete-input" placeholder="Search" id="srch-term" autocomplete="off">
  
  <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
  
  <span class="searchIcon hidden-xs"></span>
  
</div>

图片显示方式：Explorecanterbury Photo

让我知道它是如何运作的。

更改图标的位置，使它们显示为内嵌而不是彼此低于

1 个答案: