Question

我正在尝试将元素彼此相邻放置。但第三个字段始终显示在单独的行中。

<div class="row">
  <label>
    <input name="select_source" id="select-source-radio-btn" type="radio"/>
    <span style="font-size: medium;font-weight: bold;  margin: 5px;">SELECT A SOURCE</span>
  </label>
  <label>
    <input name="select_source"  id="select-group-radio-btn" type="radio"/>
    <span style="font-size: medium ;font-weight: bold;">SELECT A GROUP</span>
  </label>
  <div class="input-field">
    <input id="email" type="email" class="validate" placeholder="Email">
  </div>
</div>

如何将两个单选按钮和电子邮件字段彼此相邻放置？我尝试将float：left和float：right添加到第二个元素。

Answer 1

我认为使用 flexbox 是组织此类元素的一种更好的方法。大多数情况下都支持它，而不是像浮点数一样容易且易于使用。

.disp {
  display: flex;
justify-content: space-evenly;
}

<div class="row disp">
  <label>
    <input name="select_source" id="select-source-radio-btn" type="radio"/>
    <span style="font-size: medium;font-weight: bold;  margin: 5px;">SELECT A SOURCE</span>
  </label>
  <label>
    <input name="select_source"  id="select-group-radio-btn" type="radio"/>
    <span style="font-size: medium ;font-weight: bold;">SELECT A GROUP</span>
  </label>
  <div class="input-field disp">
    <input id="email" type="email" class="validate" placeholder="Email">
  </div>
</div>

Answer 2

您可以像这样向两个div添加显示块：

.disp {
  display:inline-block;
}

<div class="row disp">
  <label>
    <input name="select_source" id="select-source-radio-btn" type="radio"/>
    <span style="font-size: medium;font-weight: bold;  margin: 5px;">SELECT A SOURCE</span>
  </label>
  <label>
    <input name="select_source"  id="select-group-radio-btn" type="radio"/>
    <span style="font-size: medium ;font-weight: bold;">SELECT A GROUP</span>
  </label>
  <div class="input-field disp">
    <input id="email" type="email" class="validate" placeholder="Email">
  </div>
</div>

Answer 3

你可以做 display：inline-block或float：在第一个div之后向左

Answer 4

如果需要，也可以在div上使用css

    div {
      display:inline-block;
    }

    <div class="row">
  <label>
    <input name="select_source" id="select-source-radio-btn" type="radio"/>
    <span style="font-size: medium;font-weight: bold;  margin: 5px;">SELECT A     SOURCE</span>
  </label>
  <label>
    <input name="select_source"  id="select-group-radio-btn" type="radio"/>
    <span style="font-size: medium ;font-weight: bold;">SELECT A GROUP</span>
  </label>
  <div class="input-field">
    <input id="email" type="email" class="validate" placeholder="Email">
  </div>
</div>

Answer 5

如果您不想做相同的CSS，请尝试：

<div class="row">
  <label>
    <input name="select_source" id="select-source-radio-btn" type="radio"/>
    <span style="font-size: medium;font-weight: bold;  margin: 5px;">SELECT A SOURCE</span>
  </label>
  <label>
    <input name="select_source"  id="select-group-radio-btn" type="radio"/>
    <span style="font-size: medium ;font-weight: bold;">SELECT A GROUP</span>
  </label>
  <span class="input-field">
    <input id="email" type="email" class="validate" placeholder="Email">
  </span>
</div>

您将获得预期的结果

如何在div中将元素彼此相邻放置？

5 个答案: