【发布时间】：2016-04-09 01:38:11
【问题描述】：
问题：我想在所有列表项中添加以 % 为单位的 padding-top（因为我需要将文本向下移动一点，并且还需要所有元素都是可伸缩的），@ 987654321@
高度工作正常。为了计算高度，我计算了 li 高度（最初为 40 像素）相对于其父级 ul（即 400 像素）的百分比。 400 像素中的 40 像素 = 10%。在总 ul 高度仍等于 400px 之后，它似乎工作正常。 （盒子的高度是 53.33vw，因为 400px 是 750px 的 53.33%）。
但问题在于以 % 计算 padding-top。 为了计算 padding-top（即 8px），我需要计算 400px 中的 8px（400px 是父级的高度ul) = 2%，和在固定布局中一样，我从高度中减去了这 2%（10%，所以高度现在是 8%）。但在那之后，总的 ul 高度等于 470px。如何以 % 计算 padding-top 以使 ul 的高度仍为 400px？我需要保留 ul 的原始高度 400px，在添加 padding-top 后，ul 的高度变为 470px，这是不正确的。
HTML：
<div class="box">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>
CSS：
body {
line-height: 1;
}
/* THIS IS MY CODE*/
.box {
margin:0 auto;
width:100%;
max-width:750px;
height:53.33vw;
max-height:400px;
}
ul.list {
padding: 0;
width:100%;
height:100%;
background:green;
list-style-type:none;
text-align:center;
font-size:3vw;
}
ul li:nth-child(odd) {
height:8%;
width:interit;
padding-top:2%;
background:grey;
}
ul li:nth-child(even) {
height:8%;
width:interit;
padding-top:2%;
background:red;
}
【问题讨论】：
-
我不确定我是否掌握了你想要的东西，但你可以试试
box-sizing。不管怎样，你知道padding-top的陷阱吗？
标签： css responsive-design padding scaling responsiveness