javascript - 具有相同数量的元素和相同类名的 2 个列表的填充不同

Question

我创建了 2 个列表并使用 JS 将元素插入其中。它们都共享相同的类名，但是当我设置填充时，列表项有不同的结果。这是我的代码的 fiddle 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);
}

完整代码请查看fiddle

Answer 1

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

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