我怎样才能得到两个div，一个有多个嵌套的div彼此相邻？

Question

我知道此前已经提出过这样的问题，但那里列出的解决方案并不适用于我。

我有两个div，一个带有文本，另一个有多个div，采用嵌套结构。我希望它们放在一起。我尝试display: inline-block大多数解决方案指出，但它们对我不起作用。

这是我的代码：

<div class="close-date-div">Close Date:
    <div class="form-group" id="close_date">
        <div class="input-group date">
            <span class="input-group-addon" ><i class="fa fa-calendar"></i></span>  
            <input class="form-control" id="close_date_input" value="" type="text">
        </div>
    </div>
</div>

这是我为该代码段获取的输出，如何使Close Date和输入框位于同一行？

Answer 1

让你的文字成为html元素之王。在这种情况下，a使其成为带有<p>标记

的段落元素

希望这有帮助！

.inline {
  display: inline-block;
}

<div class="close-date-div">
  <p class="inline">Close Date:</p>
  <div class="form-group  inline" id="close_date">
    <div class="input-group date">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      <input class="form-control" id="close_date_input" value="" type="text">
    </div>
  </div>
</div>

Answer 2

我会发表评论，但我的代表还不够高。

我最近处理了这个问题，我必须确保所有位置都已设置，以便显示：inline-block才能正常工作。我相信以下示例可以帮助您找到所需的位置。

.close-date-div{
  position: relative;
}

.form-group{
  position: relative;
  display: inline-block;
}

.input-group date{
  position:sticky;
  display: inline-block;
}

Answer 3

Bootstrap 3在表单方面非常自以为是。如果您使用提供的课程，则可能会有一组有限的演示文稿。

您可以将表单设置为使用form-inline或form-horizontal

这里我不得不使用xs，因为片段窗口太小而无法触发任何其他断点。您还必须调整列宽和垂直对齐。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form class="form-horizontal">
  <div class="close-date-div">

    <div class="form-group" id="close_date">
      <label class="col-xs-2 control-label">Close Date:</label>
      <div class="col-xs-10">
        <div class="input-group date">
          <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
          <input class="form-control" id="close_date_input" value="" type="text">
        </div>
      </div>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 4

更改

<div class="close-date-div">

要

<div class="close-date-div form-inline">

您可能还想添加form-group。请注意，此解决方案仅适用于boostrap，因为您共享的代码使用了众所周知的引导类。