我有一个 ul 列表，我用 display:flex 显示它。
我希望每个列表项的高度都是自动的，但所有列表项都在扩展以与具有最大高度的列表项匹配相同的高度。
这是一个fiddle显示问题:
<ul class="home_slider">
<li id="one">one</li>
<li id="two">two</li>
<li id="three">three</li>
<li id="four">four</li>
</ul>
CSS
.home_slider{
display:flex;
list-style-type:none;
}
.home_slider li{
width:80px;
height:auto;
}
#one{
height:140px;
}
#two,#three,#four{
height:auto;
}
最佳答案
将 align-items: flex-start 添加到您的 flexbox 中，它们将采用自动高度:
.home_slider {
display: flex;
align-items: flex-start;
list-style-type: none;
}
列表项正在扩展以匹配与具有最大高度的列表项相同的高度，因为 align-items 默认计算为 stretch.
$('.home_slider > li:first').addClass('active');
$('#right').click(function() {
$('.active').next().addClass('active').prev().removeClass('active');
$('.home_slider > li:last').after($('.home_slider > li:first'));
});
$('#left').click(function() {
$('.home_slider > li:first').before($('.home_slider > li:last'));
$('.active').prev().addClass('active').next().removeClass('active');
});.nav_buttons {
display: inline-flex;
color: #fff;
padding: 16px;
}
#left {
margin-right: 8px;
background: grey;
padding: 4px;
}
#right {
background: grey;
padding: 4px;
}
#right:hover,
#left:hover {
cursor: pointer;
opacity: 0.8;
}
.home_slider {
display: flex;
align-items: flex-start;
list-style-type: none;
}
.home_slider li {
width: 80px;
height: auto;
border: 0px solid black;
}
#one {
background: red;
height: 140px;
}
#two {
background: lightblue;
height: auto;
}
#three {
background: lightgreen;
height: auto;
}
#four {
background: orange;
height: auto;
}
.active {
border: 0px solid black !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav_buttons">
<div id="left">left button</div>
<div id="right">right button</div>
</div>
<ul class="home_slider">
<li id="one">one</li>
<li id="two">two</li>
<li id="three">three</li>
<li id="four">four</li>
</ul>
</body>让我知道您对此的反馈。谢谢!
关于html - Flex 显示 ul 列表高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39431895/