对于具有相同数量的项目和相同类名称的2个列表，填充是不同的

Question

我使用JS创建了2个列表并将项目插入其中。它们都共享相同的类名，但是当我设置填充时，列表项具有不同的结果。 这是我的代码https://jsfiddle.net/ums1ptL9/1/

的小提琴

HTML

  <main>
    <section class="section" id="top">
        <h4>Contacts</h4>
    </section>

     <section class="section" id="mid">
         <ul id="contacts"></ul>
         <ul id="contactinfo"></ul>
    </section>

    <section class="section" id="bottom">
        <select id="dropdown">
            <option value="email">Email</option>
            <option value="number">Phone Number</option>
        </select>
    </section>
</main>

JS

   $('#contacts').append('<li class="itemname" id="'+i+'"><a href="#">' + contactarray[i].name + '</a></li>');
   $('#contactinfo').append('<li class="itemname">' + contactarray[i][$('#dropdown').val()] + '</li>');

CSS

  .itemname {
    padding: 11% 0 11% 0;
    border: 1px solid rgb(19, 19, 19);
}

请查看完整代码的小提琴

Answer 1

padding-top和padding-bottom的百分比基于包含块级元素的宽度：https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

因此，由于在contacts和contactInfo上没有设置相等的显式宽度，并且每个列表中的内容具有不同的自然宽度，因此填充具有不同的计算值。