正确的li高度
问题描述:
我使用引导,我有HTML代码。我想有2型李:正确的li高度
随着图像背景
列表项
只是内容
但我有问题 - 我不能用图像设置li的高度bg =含有li的高度。
<div class="row">
<ul class="block-list">
<li class="col-md-3 col-sm-12 info-section-grid-colored-1"></li>
<li class="col-md-3 info-grid-section-ncl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</li>
<li class="col-md-3 col-sm-12 info-section-grid-colored-1"></li>
<li class="col-md-3 col-sm-12 info-grid-section-ncl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</li>
</ul>
</div>
我的CSS:
.block-list {
padding-left: 0;
}
.block-list li {
position: relative;
float: left;
height: 100%;
}
.info-section-grid-colored-1 {
background: url(../images/1.jpg) center no-repeat;
background-size: cover;
padding: 50px 40px;
height: 100%;
float: none;
display: table-cell;
border: none;
}
.info-grid-section-ncl {
padding: 50px 40px;
float: none;
display: table-cell;
border: none;
text-align: center;
}
答
尽量固定高度,这样所有的李标签。
.block-list li {
position: relative;
float: left;
height: 50px;
}