Simon Zhu Simon Zhu - 7 months ago 24
HTML Question

Search box within list-inline

I have the following page:



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div class="container">
<div class="page-header">
<h3>CAMPAIGNS</h3>
<!--<button class="btn btn-danger pull-right">Button</button>-->
</div>
<ul class="list-inline">
<li>
<p>Sort By</p>
</li>
<li class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Date
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Date</a></li>
</ul>
</li>
<li>
<div class="input-group col-xs-4 pull-right">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
</li>
</ul>
</div>
</body>





https://jsfiddle.net/aze5uh2h/

When you open the page, you see that the search box is below the Sort By Date. How can I get it to be on the same line?

NRW NRW
Answer

When I comment out the "<li>" tag around the search box, the elements fall into a single line. So, if you delete that tag, you should get what you want.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="page-header">
      <h3>CAMPAIGNS</h3>
      <!--<button class="btn btn-danger pull-right">Button</button>-->
    </div>
    <ul class="list-inline">
      <li>
        <p>Sort By</p>
      </li>
      <li class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
          Date
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Date</a></li>
        </ul>
      </li>
      <!-- li -->
        <div class="input-group col-xs-4 pull-right">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
          </span>
          <input type="text" class="form-control" placeholder="Search">
        </div>
      <!-- /li -->
    </ul>
  </div>
</body>