Как я могу сделать li того же размера, что и дочерний элемент a?

<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>

Из приведенных ниже gif и фрагмента видно, что даже при height: auto <li> не расширяется и не становится таким же height, как его <a> потомок.

enter image description here

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>
0
cbdeveloper 2 Май 2019 в 14:15

4 ответа

Лучший ответ

Использование display: inline-block на <a> будет работать для вас лучше, без каких-либо других помех. подробнее здесь

2
Joykal Infotech 2 Май 2019 в 12:33

Вы добавляете отступ в свой класс 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>
0
Franix 2 Май 2019 в 11:44

Используйте отображение inline-flex в сегменте <li>, например:

.li1 {
    display: inline-flex;
    height: auto;
    width: auto;
}
0
Morteza Jalambadani 2 Май 2019 в 11:57

Попробуйте отобразить flex на <li>

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>
0
Irakli 2 Май 2019 в 11:20