需要将div内的元素对齐在同一行[重复]答案

【问题标题】：Need to align elements inside a div to be on the same line [duplicate]需要将div内的元素对齐在同一行[重复]
【发布时间】：2019-02-18 09:18:31
【问题描述】：

我的页面上有一个div，其中包含无序列表和另一个带有textbox 的div。目前它们显示在花药的顶部，但我需要并排显示它们。我怎样才能做到这一点？我需要在不更改 html 的情况下做到这一点，只需要使用 CSS

.t-Breadcrumb {
  list-style: none;
  border: solid 2px green;
  width: 50%;
}

.custom_search {
  border: solid 2px red;
  width: 50%;
  align: right;
}

<div class="t-BreadcrumbRegion-breadcrumb">

  <ul class="t-Breadcrumb">
    <li class="t-Breadcrumb-item"><a href="#" class="t-Breadcrumb-label">Parent Page</a></li>
    <li class="t-Breadcrumb-item is-active">
      <h1 class="t-Breadcrumb-label">Child Page</h1>
    </li>
  </ul>
  <div id="R112223" class="t-Form--search  t-Form--xlarge">
    <div class="custom_search">

      <label for="P3_SEARCH" id="P3_SEARCH_LABEL" class="t-Form-label u-VisuallyHidden">Search</label>
      <input type="text" />
    </div>

  </div>

【问题讨论】：

标签： css

【解决方案1】：

一种方法是使用float:left

.t-Breadcrumb {
  list-style: none;
  border: solid 2px green;
  width: 50%;
  float: left;
  margin: 0;
}

.custom_search {
  border: solid 2px red;
  width: 50%;
  align: right;
}
.t-Form--search {
  float: left;
}

<div class="t-BreadcrumbRegion-breadcrumb">

  <ul class="t-Breadcrumb">
    <li class="t-Breadcrumb-item"><a href="#" class="t-Breadcrumb-label">Parent Page</a></li>
    <li class="t-Breadcrumb-item is-active">
      <h1 class="t-Breadcrumb-label">Child Page</h1>
    </li>
  </ul>
  <div id="R112223" class="t-Form--search  t-Form--xlarge">
    <div class="custom_search">

      <label for="P3_SEARCH" id="P3_SEARCH_LABEL" class="t-Form-label u-VisuallyHidden">Search</label>
      <input type="text" />
    </div>

  </div>

【讨论】：