Question

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

我改变了：

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

要：

.framemail .window .mail li i {
display: inline-block;
min-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>

enter image description here 我希望这些列出要根据里面的文本调整大小的项目。是什么让它们得到修复？

Answer 1

只需删除min-height并添加padding-top，padding-bottom即可从边框填充。在这种设计中，您不需要制作最小高度或固定高度的内容块。

然后你需要分两部分：

删除任何位置绝对元素并左右浮动。浮动创造一个明确的两者。小提琴演示需要全部替换。

以下是Fiddle更新

的更新

将min-height应用于List项

1 个答案: