Пробелы между элементами списка в столбце контейнера-строки bootstrap

Question

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

HTML код выпуска (использует bootstrap 4.3.1):

 <div class="container">
        <div class="row">
                <div class="col">
                    <center>Test Column</center>
                    <div class="dropdown">
                        <li><a href="#">Test text 1<span>&#10003;</span></a> </li><br>
                            <a href="#">
                                <div class="dropdown-content">
                                    <p>Dropdown item 1</p>
                                </div>
                            </a>
                    </div>
                    <div class="dropdown">
                        <li><a href="#">Test text 2<span>&#10003;</span></a> </li><br>
                            <a href="#">
                                <div class="dropdown-content">
                                    <p>Dropdown item 2</p>
                                </div>
                            </a>
                    </div>
                </div>
        </div>
</div>

CSS:

/* force list items on seperate line each */
ul {
  display: inline;
}

/* setup for showing which links have been visited already */
a span {
  color: white;
}
a:hover {
 text-decoration: none;
}

a:visited span {
  color: green;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  overflow: hidden;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  left: 20%;
}

.text-window {
    min-width: 320px;
    min-height: 480px;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

Кроме того, я повторил проблему в this JSFiddle .

Answer 1

Удалите теги <br> в этой строке <li><a href="#">Test text 1<span>&#10003;</span></a> </li><br>

Answer 2

Удалить точку останова в вашем коде li HTML.

Теги разрыва содержат дополнительное пространство между верхом и низом. Это как перейти на следующую строку.

<div class="container">
    <div class="row">
            <div class="col">
                <center>Test Column</center>
                <div class="dropdown">
                    <li><a href="#">Test text 1<span>&#10003;</span></a> </li>
                        <a href="#">
                            <div class="dropdown-content">
                                <p>Dropdown item 1</p>
                            </div>
                        </a>
                </div>
                <div class="dropdown">
                    <li><a href="#">Test text 2<span>&#10003;</span></a> </li>
                        <a href="#">
                            <div class="dropdown-content">
                                <p>Dropdown item 2</p>
                            </div>
                        </a>
                </div>
            </div>
    </div>