如何在div中将元素彼此相邻放置? [英] how to position elements next to each other in a div?

问题描述

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

I am trying to position the elements next to each other. but the third field keeps appearing in a separate row.

<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添加到第二个元素.

How can i position the two radio buttons and email field next to each other? i tried adding float:left and float:right to the second element.

推荐答案

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

I think that using flexbox is a much better approach to organize elements like this. It's mostly supported, not buggy as floats and easy to use.

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

这篇关于如何在div中将元素彼此相邻放置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！