我创建了 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
最佳答案
padding-top
和 padding-bottom
的百分比基于包含 block 级元素的宽度:https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
因此,由于在 contacts 和 contactInfo 上没有设置相等的显式宽度,并且每个列表中的内容具有不同的自然宽度,因此填充具有不同的计算值。
关于javascript - 具有相同数量的元素和相同类名的 2 个列表的填充不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31504028/