javascript - 当 anchor 标记正下方有一个 p 元素时，如何使 anchor 标记填充 li 元素

Question

我想知道是否有办法让 anchor 标记填充 li 元素的内容。我已经搜索了论坛，只在 li 中找到了只有 anchor 标签的例子。我感觉好像我的 CSS 是正确的，但是在 li 元素中也有一个 p 元素。所以我的 anchor 标记与我的段落元素共享空间。

HTML如下:

<div class="search-results">
   <ul id="output">
   </ul>
</div>

CSS:

#output li a {
  display: flex;
  color: #D0CCD0;
  font-size: 1.5vw;
  text-decoration: none;
  border: 1px black solid;
  z-index: 100;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

JS:

$('#output').append("<li><a href=" + data[3][i] + ">" + data[1][i] +
      "</a><p>" + data[2][i] +"</li>");

我有 codepen 元素所以你可以在这里测试它:https://codepen.io/rembrandtreyes/pen/OjpVyw

Answer 1

你的问题来自 display:flex