Question

我在项目中使用bootstrap。

该区域的宽度为350px。

我有这个html元素：

   <form class="form-inline">
        <div class="input-group input-group-sm col-xs-5" >
            <input type="text" class="form-control" placeholder="search">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>

        <div class="input-group input-group-sm">
                <select class="form-control" ng-model="" ng-options="">
                    <option value="">- authority-</option>
                </select>
        </div>
    </form>

这是plunker。

如何在一行中创建搜索框和下拉列表。

Answer 1

显示

.input-group表，所以：

.input-group {
  display: inline-table;
}

将解决您的问题。

JSFiddle

Answer 2

你不需要css来解决这个问题，你可以使用bootstrap样式来实现。

将表格包裹在12个宽的容器（col-lg-12）中，并将每个输入物包裹在6个宽的容器（col-lg-6）中。（为了简单起见，我在示例中仅使用了桌面大小）

这看起来像是：

<div class="col-lg-12">
   <!-- start form -->
   <div class="col-lg-6">
      <!-- input -->
   </div>
   <div class="col-lg-6">
      <!-- input -->
   </div>
   <!-- end form -->
</div>

这样，bootstrap将屏幕切成两半（12/2 = 6）并将输入框放在那里。

要使其与您的代码一起使用，请查看此fiddle

注意 我添加了col-lg，col-md，col-sm和col-xs，使它们无论屏幕尺寸如何都显示在同一条线上。

修改要将所有这些放在另一个面板中，请使用：

<div class="panel panel-default"> <div class="panel-body">  </div> </div>

工作小提琴：http://jsfiddle.net/92z54z04/596/

Answer 3

<form class="form-inline">
    <div class="form-group" >
    <input type="text" placeholder="search"/>

            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>

    </div>

    <select class="form-group"    ng-model="builderStep1.inspectionArchiveData.DomainId"  ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                <option value="">- authority-</option>
    </select>

</form>

Answer 4

使用col-xs-6属性

可以轻松地使用bootstrap

这是工作代码：

    <form class="form-inline">
    <div class="col-xs-6">
            <div class="input-group input-group-sm" >
            <input type="text" class="form-control" placeholder="search">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
    </div>

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

        <div class="input-group input-group-sm">
                <select class="form-control" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                    <option value="">- authority-</option>
                </select>
        </div>
</div>

    </form>

Answer 5

您可以扩展bootstrap以允许输入组中的select元素。这取决于您的用例，如果它是直观的，但我认为这可能是一个很好的评估选项。您基本上复制并粘贴了一些bootstraps样式，以使select元素适合输入组。如果您可以控制sass，减少文件，那么您可以比我更清洁。

＆＃13;

.input-group-select:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.input-group-select {
  position: relative;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}

.input-group-select>select {
  border-color: #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 0;
  border-left-width: 0;
}

.input-group-btn:not(:first-child):not(:last-child)>.btn {
  border-radius: 0;
  border-left-width: 0;
}

.input-group-select:last-child>select {
  border-radius: 0 3px 3px 0;
}

.input-group-sm>.input-group-select>select {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-inline">
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-select">
      <select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                      <option value="">- authority-</option>
              </select>
    </div>
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-select">
      <select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                      <option value="">- authority-</option>
              </select>
    </div>
  </div>
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
    <div class="input-group-select">
      <select class="select" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                      <option value="">- authority-</option>
              </select>
    </div>
  </div>
</form>

＆＃13;

Answer 6

只需在div中使用样式：

 display:inline-table;

http://jsfiddle.net/ankitg1602/mqnrmLjb/1/

如何在单行中制作元素？

6 个答案: