时间戳

首页 > 解决方案 > 如何使用html和css并排放置两个选择属性（以不同的形式）

html - 如何使用html和css并排放置两个选择属性（以不同的形式）

问题描述

我需要并排放置两种不同形式的选择类型

浮动和跨度不起作用，我也尝试过位置属性但没用。

下面是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>

标签： htmlcssspring-mvcjsp

解决方案

通过使用

.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 用于此类布局目的，因此我不会在实际中展示它。

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

推荐阅读