Question

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

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

Answer 2

html标签的默认显示属性为“block”，您已将anchor（a）的显示设置为flex。这就是它溢出的原因。将两者都更改为

p,a{
       display:inline;
   }

如果你想只改变几个p和一个标签，就给他们上课

当锚标记下面有一个p元素时，如何使锚标记填充li元素

2 个答案: