如何使<li>与<a> child?

Question

How can I make the li the same size as the a child?

<ul class="ul1" id="list">
  <li class="li1" id="item1">
    <a class="a1" id="link1">Item 1</a>
  </li>
  <li class="li1" id="item2">
    <a class="a1" id="link2">Item Long 2</a>
  </li>
</ul>

You can see on the gif and snippet below that even with height: auto, the <li> is not expanding to be same height as its <a> child.

的高度相同

const ul = document.getElementById('list');
const item1 = document.getElementById('item1');
const link1 = document.getElementById('link1');
const description = document.getElementById('description');

description.innerHTML = `<b>ul height is:</b> ${window.getComputedStyle(ul).height}
<b>li height is:</b> ${window.getComputedStyle(item1).height}
<b>link height is:</b> ${window.getComputedStyle(link1).height}`

* {
  box-sizing: border-box;
}

.ul1 {
  list-style-type: none;
}

.li1 {
  display: inline-block;
  height: auto;
  width: auto;
}

.a1 {
  padding: 5px 10px;
  border: 1px dotted blue;
  background: lightblue;
  background-clip: content-box;
}

#description {
  white-space: pre-wrap;
}

<ul class="ul1" id="list">
  <li class="li1" id="item1">
    <a class="a1" id="link1">Item 1</a>
  </li>
  <li class="li1" id="item2">
    <a class="a1" id="link2">Item Long 2</a>
  </li>
</ul>

<p id="description"></p>

Answer 1

在display: inline-block上使用<a>会对您更好，而不会受到任何其他干扰。 阅读更多here

Answer 2

尝试在<li>上显示flex

const ul = document.getElementById('list');
const item1 = document.getElementById('item1');
const link1 = document.getElementById('link1');
const description = document.getElementById('description');

description.innerHTML = `<b>ul height is:</b> ${window.getComputedStyle(ul).height}
<b>li height is:</b> ${window.getComputedStyle(item1).height}
<b>link height is:</b> ${window.getComputedStyle(link1).height}`

* {
  box-sizing: border-box;
}

.ul1 {
  list-style-type: none;
}

.li1 {
  display:flex;
  height: auto;
  width: auto;
}

.a1 {
  padding: 5px 10px;
  border: 1px dotted blue;
  background: lightblue;
  background-clip: content-box;
}

#description {
  white-space: pre-wrap;
}

<ul class="ul1" id="list">
  <li class="li1" id="item1">
    <a class="a1" id="link1">Item 1</a>
  </li>
  <li class="li1" id="item2">
    <a class="a1" id="link2">Item Long 2</a>
  </li>
</ul>

<p id="description"></p>

Answer 3

在<li>段上使用显示 inline-flex ：

.li1 {
    display: inline-flex;
    height: auto;
    width: auto;
}

Answer 4

您要在a1类上添加填充，以增加间隔。我想这是您想要的东西。

const ul = document.getElementById('list');
const item1 = document.getElementById('item1');
const link1 = document.getElementById('link1');
const description = document.getElementById('description');

description.innerHTML = `<b>ul height is:</b> ${window.getComputedStyle(ul).height}
<b>li height is:</b> ${window.getComputedStyle(item1).height}
<b>link height is:</b> ${window.getComputedStyle(link1).height}`

* {
  box-sizing: border-box;
}

.ul1 {
  list-style-type: none;
}

.li1 {
  display: inline-block;
  height: auto;
  width: auto;
}

.a1 {
  padding: 0px 10px;
  border: 1px dotted blue;
  background: lightblue;
  background-clip: content-box;
}

#description {
  white-space: pre-wrap;
}

<ul class="ul1" id="list">
  <li class="li1" id="item1">
    <a class="a1" id="link1">Item 1</a>
  </li>
  <li class="li1" id="item2">
    <a class="a1" id="link2">Item Long 2</a>
  </li>
</ul>

<p id="description"></p>