Радио, выпадающий, проверка на той же линии - PullRequest
Новая
       57

Радио, выпадающий, проверка на той же линии

0 голосов
/ 01 октября 2019

Я пытаюсь установить переключатель, раскрывающийся список и флажок в той же строке, где отображается второй переключатель. Я использую 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>

1 Ответ

0 голосов
/ 01 октября 2019

попробуйте использовать это так .. 

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