具有相同数量和相同 class 名称的 2 个列表的填充不同

Question

我创建了 2 个列表并使用 JS 将项目插入其中。它们都共享相同的 class 名称，但是当我设置填充时，列表项有不同的结果。这是一个 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 的百分比基于包含块级元素的宽度：https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

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

具有相同数量和相同 class 名称的 2 个列表的填充不同

padding is different for 2 lists with the same amount of items with and same class name

html

javascript

css

padding