如何将列表项限制在div元素中

Question

我想限制front类中列表项的大小，以便我的列表显示在卡片边界内。但现在只有列表中的第一项显示在卡片内，其余项目显示在卡片外。这是原始代码：点击此处查看代码笔中的代码

这是我的html代码：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<div class="p">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
<div class="back">
<!-- back content -->
<img src="https://miro.medium.com/max/1620/1*MKkufG0eyT0IQ5wZ70qKxQ.jpeg" alt="Girl in a jacket"  width=100% height=100%
</div>
</div>
</div>

这是我的CSS代码：

/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 240px;
margin: 1em auto;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
color: cornSilk;
text-align: center;
font: 3em/240px 'Helvetica Neue', Helvetica, sans-serif;
box-shadow: -5px 5px 5px #aaa;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
background: cornflowerBlue;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: crimson;
}

Answer 1

您可以从ul中删除一些填充并降低行高，这样可以容纳更多项目。添加此：

.front ul{
padding:0;
margin:0;
}
.front ul li{
line-height:1.5;
}