gpt4 book ai didi

html - 将最小高度应用于列表项

转载 作者:太空宇宙 更新时间:2023-11-04 12:51:25 38 4
gpt4 key购买 nike

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

JSFiddle:http://jsfiddle.net/h66br41p/

我已经改变了:

.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我希望这些列出要根据里面的文本调整大小的元素。是什么让它们固定下来?

最佳答案

只需删除 min-height 并添加 padding-toppadding-bottom 即可从边框填充。在此设计中,您不需要为内容 block 设置最小高度或固定高度。

然后你需要做一个两部分:

去掉任何位置绝对元素,做一个左右浮动。 Atfer float 创建一个明确的两者。 fiddle 演示需要全部更换。

这是关于 Fiddle 的更新更新

关于html - 将最小高度应用于列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26129770/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com