Question

我的页面上有一个div，其中包含无序列表，另一个div中包含textbox。目前，它们在花药顶部显示一个，但我需要并排显示它们。我该怎么做？我只需要使用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>

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

需要将div中的元素对齐才能在同一行上

1 个答案: