當錨標記下方有ap元素時，如何使錨標記填充li元素

Question

我想知道是否有一種方法可以使錨標記填充li元素的內容。 我已經搜索了論壇，僅在li內找到僅錨標記的示例。 我感覺好像我的CSS是正確的，但在li元素中也有ap元素。 所以我的錨標記與我的段落元素共享空間。

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

您的問題來自顯示：flex

Answer 2

html標記的默認顯示屬性為“阻止”，並且已將錨點（a）的顯示設置為flex。 這就是為什么它溢出。 都更改為

p,a{
       display:inline;
   }

或給他們上課，如果您只想更改幾個p和一個標簽