如何仅将列表项限制在 div 元素中？答案

【问题标题】：how can I limit my list items within div element only?如何仅将列表项限制在 div 元素中？
【发布时间】：2021-04-22 15:35:30
【问题描述】：

我想限制front 类中列表项的大小，以便我的列表出现在卡片边界内。但现在只有列表中的第一项显示在卡片内，其余项目显示在卡片外。这是原始代码：click here to see the code in code pen

这是我的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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：