Wie kann man <li> auf die gleiche Höhe wie sein <a>-Kind machen?
cbentwickler
Wie kann ich lidie gleiche Größe wie das aKind machen?
<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>
Sie können auf dem Gif und dem Snippet darunter sehen, dass selbst bei height: auto, das <li>nicht erweitert wird, um dasselbe heightwie sein <a>untergeordnetes Element zu sein .
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> Joykal Infotech
Die Verwendung von display: inline-blockon <a>würde für Sie besser funktionieren, ohne dass andere Störungen auftreten. hier mehr lesen