早上好,
当我将一个元素嵌套display: -webkit-box
在另一个元素中时,display: -webkit-box
它无法将其元素正确地包含为一个灵活的盒子。请参阅下图中删除按钮后面的文本。
李HTML:
<li>
<div class="reference">
<div class="number">1.</div>
Lawson, B. Sharp, R. (2011). <em>Introducing Html5.</em> New Riders Pub
</div>
<div class="edit">
<button class="delete">Delete</button>
</div>
</li>
LI CSS(美学省略):
li {
display: -webkit-box;
-webkit-box-align: center; /* Vertically center elements within LI */
}
.reference {
-webkit-box-flex: 1; /* Expand to fill space */
display: -webkit-box;
}
.number {
width: 3ex;
padding: 0 5px 0 0;
}
.edit {
/* I have tried setting a width and -webkit-box-flex: 0,
but this does not solve the problem. */
}
随着视口宽度的变化,.reference 保持灵活是至关重要的。
该问题可以通过删除 .reference's 来解决display: -webkit-box;
,但这意味着我不能在 .reference 中的元素上使用灵活盒模型,我需要将项目编号(1.、2.等)保留在自己的列中。
非常感谢任何帮助。亲切的问候。