Question

我有这两个文字框，我们并排在一起，目前它们是彼此堆叠在一起的。

我对此感到非常紧张！它的东西很简单，但我找不到它！

以下是代码：

<div class="form-group">
    <strong>Date:</strong>

    <div class='input-group date datepicker' ng-model="package.dateA">
        <input type='text' id="date" ng-model="package.dateB"
               class="form-control"/>
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                  </span>
    </div>
    <!-- <div class="form-group"> -->
    <strong>Time:</strong>

    <div class='input-group date timepicker' ng-model="package.timeA">
        <input type='text' id="time" ng-model="package.timeB" class="form-control"/>
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time"></span>
                  </span>
    </div>
</div>

修改下面是我在答案中建议的样式表编辑时会发生什么

Answer 1

＆＃34;使用网格Luke！＆＃34;

由于您正在使用bootstrap，我建议您使用网格布局。 Grid system

<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="form-group">
            <strong>Date:</strong>

            <div class='input-group date datepicker' ng-model="package.dateA">
                <input type='text' id="date" ng-model="package.dateB"
                       class="form-control"/>
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="form-group">
            <strong>Time:</strong>

            <div class='input-group date timepicker' ng-model="package.timeA">
                <input type='text' id="time" ng-model="package.timeB" class="form-control"/>
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-time"></span>
              </span>
            </div>
        </div>
    </div>
</div>

虽然你已经接受了答案，但我还是会发布它。

Answer 2

DIV是块级元素。如果你想让它们彼此相邻，你需要使用CSS样式。

display: inline-block;

http://jsfiddle.net/sabgbn16/

html与文本框对齐

2 个答案: