Question

基于@HebleV的更新：

我在格式化和尝试在一行中显示html块时遇到了一些问题

这是我的HTML代码

<form class="navbar-form" role="search">

   <div class="input-group">
      <input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
      <div class="input-group-btn">
         <button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
      </div>
   </div>

   <div ng-show="selected == 'Employer Search'">
      <div class="input-group">
         <input type="text" class="form-control" placeholder="State" name="state" id="state" />
      </div>
      <div class="input-group">
         <input type="text"   class="form-control" placeholder="City" name="city" id="city" />
      </div> 
   </div> 
</form>

截图：

Answer 1

向你的div添加display：inline-block。

Answer 2

也许尝试将它们放入＆＃34; row＆＃34;和＆＃34; col＆＃34; s？（我还没有检查过这段代码，但是你明白了;））

<div class="row">
<form class="navbar-form" role="search">
       <div class="col-*-3"><div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/></div>
          <div class="input-group-btn">
             <button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
          </div>
       </div></div>
    <div class="col-*-3">
       <div ng-show="selected == 'Employer Search'">
          <div class="input-group">
             <input type="text" class="form-control" placeholder="State" name="state" id="state" />
          </div>
          <div class="input-group">
             <input type="text"   class="form-control" placeholder="City" name="city" id="city" />
          </div> 
       </div> 
</div>
    </form></div>

By＆＃34; *＆＃34;我的意思是md，lg等（你知道，屏幕大小的东西）

Answer 3

因为您正在使用引导程序，请将代码更改为此...

<form action="" class="form-inline">
    <div class="form-group">
        <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
              <div class="input-group-btn">
                 <button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
              </div>
          </div>            
    </div>      

    <div class="form-group" ng-show="selected == 'Employer Search'">
          <div class="input-group">
             <input type="text" class="form-control" placeholder="State" name="state" id="state" />
          </div>
          <div class="input-group">
             <input type="text"   class="form-control" placeholder="City" name="city" id="city" />
          </div> 

    </div>
</form>

这是我的示例输出 http://goo.gl/PYklyR

Answer 4

由于您使用的是bootstrap，因此可以执行以下操作：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12">
      <input type="text" />
      <input type="text" />
      <input type="text" />
</div>
  </div>
</div>

JS小提琴 https://jsfiddle.net/lightcast/6nwvnspd/

Answer 5

删除其他2个字段的输入组，并将所有3个字段包含在一个单个div =＆＃34; input-group＆＃34;检查此http://codepen.io/anon/pen/YwRNPM

<form class="navbar-form" role="search">

 <div class="input-group">
   <input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
   <div class="input-group-btn">
     <button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
  </div>


  <div ng-show="selected == 'Employer Search'">
   <input type="text" class="form-control" placeholder="State" name="state" id="state" />

     <input type="text"   class="form-control" placeholder="City" name="city" id="city" />
   </div> 
 </div> 
</form>

条件显示html块 - 显示在一行中

5 个答案: