如何在单行中制作元素?

时间:2017-03-13 11:51:24

标签: css angularjs twitter-bootstrap

我在项目中使用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

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

6 个答案:

答案 0 :(得分:1)

显示

.input-group表,所以:

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

将解决您的问题。

JSFiddle

答案 1 :(得分:1)

你不需要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">
     <!--    form row -->
  </div>
</div>

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

答案 2 :(得分:0)

<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>

答案 3 :(得分:0)

使用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>

答案 4 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

答案 5 :(得分:-1)

只需在div中使用样式:

 display:inline-table;

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