html - radio 、下拉菜单、检查同一行

Question

我试图在第二个单选按钮出现的同一行上获取单选按钮、下拉菜单和复选框。我正在使用 Bootstrap 4，但我不需要它看起来或符合引导理想。简单的 html 很好。

我认为 display:inline 或 display:inline-block 在第二个单选组周围使用 div 应该可以做到，但顽固的复选框仍保留在下面的行中，而不是内联。

我想要的:

   Line 1:  Radio button (Popular)
   Line 2:  Radio button (Order), Dropdown, Checkbox

我有什么:

   Line 1:  Radio button (Popular)
   Line 2:  Radio button (Order), Dropdown
   Line 3:  Checkbox

代码如下:

<div class="form-check">
    <label class="form-check-label">
      <input style="height:1em; width:1em;" type="radio" class="form-check-input" value="popular" name="abc" checked>Popular
    </label>
</div> 
<div class="form-check">    
    <div style="display:inline-block;">    
        <label class="form-check-label">
            <input style="height:1em; width:1em;" type="radio" class="form-check-input" value="order" name="abc" checked>Order
        </label>
        <select id="user_tag_dropdown">
            <option>One</option>
            <option>Two</option>
        </select>  
        <div class="checkbox">
            <label>
              <input type="checkbox"> All
            </label>
        </div>
    </div>    
</div>  

Answer 1

尝试像这样使用它..

 <div class="form-check">
    <label class="form-check-label">
      <input style="height:1em; width:1em;" type="radio" class="form-check-input" value="popular" name="abc" checked>Popular
    </label>
</div> 
<div class="form-check">    
    <div style="display:inline-block;">    
        <label class="form-check-label">
            <input style="height:1em; width:1em;" type="radio" class="form-check-input" value="order" name="abc" checked>Order
        </label>
        <select id="user_tag_dropdown">
            <option>One</option>
            <option>Two</option>
        </select>  
        <div class="checkbox" style="display: inline">
            <label>
              <input type="checkbox"> All
            </label>
        </div>
    </div>    
</div>