Html 将最小高度应用于列表项

我正在使用Laravel框架的引导主题，我遇到了允许列表项根据其内容增加高度的问题

JSFiddle：

我改变了：

.framemail .window .mail li i {
display: inline-block;
height: 70px;
width: 6px;
}

致：

这不会产生任何不同。无论内容如何，它仍然是70px的固定高度

以下是针对该区域的任何其他css：

.framemail .window .mail li {
background-color:#3d3d3d;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
border-top: 1px solid #888;
position: relative;
margin-left:-18px;
}

.framemail .window .mail li:first-child {
border-top: none;
}

.framemail .window .mail li:hover {
background-color: #5d5b5b;
}

.framemail .window .mail li:after,
.framemail .window .mail li:before {
border-left: 8px solid transparent;
content: '';
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
}

.framemail .window .mail li i {
display: inline-block;
height: 70px;
width: 6px;
}

.framemail .window .mail li .read {
background-color: #ddd;
}

.framemail .window .mail li .unread {
background: #b2c831;
}

.framemail .window .mail li img {
border-radius: 2px;
height: 36px;
left: 12px;
position: absolute;
top: 6px;
width: 36px;
}

.framemail .window .mail li p {
font: 13px sans-serif;
left: 56px;
position: absolute;
top: 3px;
}

以下是HTML：

<ul class="mail">
                    <li>
                        <i class="unread"></i>
                        <img src="/assets/img/logo80x80.png" alt="avatar">
                        <p class="sender">Dashboard</p>
                        <p class="message">You have been successfully verified<br>Clipping<br>Clipping</p>
                        <div class="actions">
                            <a><img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"></a>
                        </div>
                    </li>
                    <li>
                        <i class="unread"></i>
                        <img src="/assets/img/logo80x80.png" alt="avatar">
                        <p class="sender">Dashboard</p>
                        <p class="message">You have been successfully verified</p>
                        <div class="actions">
                            <a><img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"></a>
                        </div>
                    </li>
                </ul>

仪表板

您已被成功验证
剪辑
剪辑


仪表板

您已成功验证

---

我希望这些列表中的项目可以根据里面的文本调整大小。是什么使它们固定？

只需移除

最小高度

并添加

顶部填充

，

底部填充

，即可从边框填充。在这种设计中，您不需要制作最小高度或内容块的固定高度

然后你需要做两个部分：

移除任何位置绝对元素，并左右浮动。Atfer浮动创建一个清晰的二者。小提琴演示需要全部更换

---

这里是更新时更新

您的屏幕截图没有显示一行需要高于70px。你有文本剪辑的例子吗？可能会有帮助。。。当然，在一个工作演示（fiddle）中看到HTML+CSS会更容易。当然，原始帖子会更新，并添加两行额外的“剪辑”。我将看看我能对JSFIDDLE做些什么，只需删除最小高度并添加填充顶部和填充底部，以从边框填充。答案更新。最新元素，您现在可以随心所欲地设计样式。或者，如果你想使用绝对位置，那么搜索一个JQ插件，该插件获取文本内容高度并放入父元素。这样做会将所有内容压缩在一起。将fiddle链接更新为未读行高度。剩下的你自己做：）

<ul class="mail">
                    <li>
                        <i class="unread"></i>
                        <img src="/assets/img/logo80x80.png" alt="avatar">
                        <p class="sender">Dashboard</p>
                        <p class="message">You have been successfully verified<br>Clipping<br>Clipping</p>
                        <div class="actions">
                            <a><img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"></a>
                        </div>
                    </li>
                    <li>
                        <i class="unread"></i>
                        <img src="/assets/img/logo80x80.png" alt="avatar">
                        <p class="sender">Dashboard</p>
                        <p class="message">You have been successfully verified</p>
                        <div class="actions">
                            <a><img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"></a>
                        </div>
                    </li>
                </ul>