Как добавить разрыв строки после раскрывающегося меню - PullRequest
0 голосов
/ 20 июня 2020

Я изучаю HTML, и пока возился с формами и раскрывающимися меню, я обнаружил, что не могу добавить разрыв строки после раскрывающегося списка. Вот как выглядит страница.

Добавление разрыва строки после закрывающего тега не работает, и добавление нескольких разрывов строк тоже не работает. Есть ли способ получить первый переключатель в раскрывающемся списке с чистым HTML? Вот мой код:

<form>
    <label for="dropdown" id="dropdown-label">Select one:</label><br>
        <select name="thing" id="dropdown">
          <option value="thing1">Thing 1</option>
          <option value="thing2">Thing 2</option
        </select><br>
            
    <div>
        <input type="radio" id="num1" name="choices" value="num1">
        <label for="num1">Num1</label><br>
            
        <input type="radio" id="num2" name="choices" value="num2">
        <label for="num2">Num2</label><br>  
    </div>
</form>

Ответы [ 3 ]

0 голосов
/ 20 июня 2020

используя bootstrap, вы можете добавить это, и у вас будет линия между всеми пунктами меню или после них. <div class="dropdown-divider"></div>

0 голосов
/ 20 июня 2020

тег опции 2 вещь не был закрыт. поэтому тег br не работал.

<form>
    <label for="dropdown" id="dropdown-label">Select one:</label><br>
        <select name="thing" id="dropdown">
          <option value="thing1">Thing 1</option>
          <option value="thing2">Thing 2</option>
        </select>
        <br>
    <div>
    
        <input type="radio" id="num1" name="choices" value="num1">
        <label for="num1">Num1</label><br>
            
        <input type="radio" id="num2" name="choices" value="num2">
        <label for="num2">Num2</label><br>  
    </div>
</form>
0 голосов
/ 20 июня 2020

По умолчанию выпадающий элемент имеет css «встроенный». Поскольку вы просили чистый ответ HTML, я бы также поместил label и dropdown в div (поскольку они display: block по умолчанию и будут ломаться). Например:

<form>
    <div>
        <label>...</label>
        <select>...</select>
    </div>
    <div>
        ...
    </div>
</form>
...