Html 引导容器行列中列表项之间的空格

我目前正在努力解决我创建的下拉列表中似乎没有空白的问题。从外观上看，它如下所示：

问题的HTML代码（使用bootstrap 4.3.1）：

---

此外，我已在中复制了该问题。

删除此行中的

标记


删除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>


试验柱



我似乎不知怎么搞砸了我的例子。我的原始代码中没有
标记，而且仍然有空格。谢谢你指出这一点，这是我的一个坏例子。@MennoVanDijk在这种情况下你能编辑这个问题吗？如果你在<<代码> 
 标签之间得到多余的空白，请考虑在你的代码<
 
 
 中修改空白。显然，我是在为每个
标记创建不同的
，因此是空白。非常感谢，我花了很长的时间才明白这一点：）我很高兴这对任何一方都有帮助
/* 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;
}

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