Как поставить два атрибута выбора (которые находятся в разных формах) бок о бок, используя html & css

Question

Мне нужно поставить два выбранных типа рядом, которые находятся в разных формах

Float и span не работают, я также пробовал свойство position, но безрезультатно.

Нижеэто HTML код,

form.aui .field-group {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 4px 0 4px 145px;
  position: fixed;
  left: 50%;
  margin: 1px 0;
  width: 100%
}

<div class="xyz-page-panel">
  <div class="xyz-page-panel-inner">
    <section class="xyz-page-panel-content">
      <div id="searchType">
        <form class="xyz">
          <div class="field-group">
            <label for="one-two-id">Search Type  </label>
            <select name="searchType" class="select long-field" id="one-two-id">
              <option value="one">one</option>
              <option value="two">two</option>
            </select>
          </div>
        </form>
      </div>
      <div>
        <form class="xyz">
          <div class="field-group">
            <label for="search-options-id">Search field </label>
            <select class="select long-field" id="productName">
              <option value="one">one</option>
              <option value="two">two</option>
            </select>
          </div>
        </form>
      </div>

    </section>
  </div>
</div>

Answer 1

Используя

.xyz-page-panel-content {
  display: flex;
}

Важно, чтобы вы распознали элементы в вашей структуре, которые являются родственными.В вашем случае это

<div class="xyz-page-panel">
  <div class="xyz-page-panel-inner">
    <section class="xyz-page-panel-content">
      <!-- sibling 1 -->
      <div id="searchType">
        <!-- ... -->
      </div>
      <!-- sibling 2 -->
      <div>
        <!-- ... -->
      </div>
    </section>
  </div>
</div>

Чтобы display: flex работал, вы должны назначить это правило родительскому элементу тех, кто должен быть рядом друг с другом.Если это не братья и сестры, вы должны использовать другую стратегию или изменить структуру HTML.

Вместо этого вы можете использовать float, плавая братьев и сестер.Мне не нравится использовать float для подобных макетов, поэтому я не показываю его в действии.

.xyz-page-panel-content > * {
  float: left ;
}

form.aui .field-group {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 4px 0 4px 145px;
  position: fixed;
  left: 50%;
  margin: 1px 0;
  width: 100%
}

.xyz-page-panel-content {
  display: flex;
}

<div class="xyz-page-panel">
  <div class="xyz-page-panel-inner">
    <section class="xyz-page-panel-content">
      <div id="searchType">
        <form class="xyz">
          <div class="field-group">
            <label for="one-two-id">Search Type  </label>
            <select name="searchType" class="select long-field" id="one-two-id">
              <option value="one">one</option>
              <option value="two">two</option>
            </select>
          </div>
        </form>
      </div>
      <div>
        <form class="xyz">
          <div class="field-group">
            <label for="search-options-id">Search field </label>
            <select class="select long-field" id="productName">
              <option value="one">one</option>
              <option value="two">two</option>
            </select>
          </div>
        </form>
      </div>

    </section>
  </div>
</div>

Answer 2

Попробуйте вывести div за пределы тегов формы.Это должно работать.

#searchType {
  float:left;
}

Как это