我遇到过这个问题几次,我想知道是否有人可以提供任何帮助。
我有以下html:
<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>
CSS:
ul li{
list-style-type:none;
display:inline-block;
text-align:center;
width: 100px;
}
ul li img{
width: 100px;
display:block;
margin:0 auto;
margin-bottom:20px;
}
有没有办法让文字换行以便图片不被推高?
ul li{
list-style-type:none;
display:inline-block;
text-align:center;
width: 100px;
}
ul li img{
width: 100px;
display:block;
margin:0 auto;
margin-bottom:20px;
}
<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>
答案 0 :(得分:2)
将垂直对齐顶部添加到li
ul li{
list-style-type:none;
display:inline-block;
vertical-align: top;
text-align:center;
width: 100px;
}
ul li img{
width: 100px;
display:block;
margin:0 auto;
margin-bottom:20px;
}
<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>
答案 1 :(得分:1)
只需添加vertical-align
<强> CSS 强>
ul li{
list-style-type:none;
display:inline-block;
text-align:center;
width: 100px;
vertical-align: top;
}
<强> DEMO HERE 强>
答案 2 :(得分:1)
ul li{
list-style-type:none;
display:inline-block;
text-align:center;
width: 100px;
vertical-align: top;
}
ul li img{
width: 100px;
display:block;
margin:0 auto;
margin-bottom:20px;
}
<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>