Question

我在li中遇到问题，我想删除缩略图图像底部的文字。

我希望文字留在图片右侧。我不希望它在它的底部。有什么问题？

HTML

*{
 margin: 0;
 padding: 0;
 list-style: none;
}

#menu2 { 
 background-color: #fff;
 border:1px solid #D4DFE7;
 height: 100%;
 width: 200px;
 float: left;
 padding: 5px; 
}

#menu2 li{
 display:inline-block;
 margin-bottom:10px;
 width:100%;
 clear:both;
}
#menu2 li img{
 float:left;
 width:64px;
 margin-right:10px;
}

<div id="menu2">
    <ul>
    
        <li><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/pencil.png">The most common type of pencil casing is of thin wood, usually hexagonal in section but sometimes cylindrical, permanently bonded to the core. Similar permanent casings may be constructed of other materials such as plastic or paper.</li>
        
         <li><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/pencil.png">The most common type of pencil casing is of thin wood, usually hexagonal in section but sometimes cylindrical, permanently bonded to the core. Similar permanent casings may be constructed of other materials such as plastic or paper.</li>
    
    </ul>    
</div>

谢谢各位朋友！

Answer 1

如果您想要将图像始终固定并且文本是流畅的，您可以使用固定流体布局，如下所示：

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
ul {margin: 15px;}
li {position: relative; padding-left: 65px; margin: 0 0 15px; min-height: 65px;}
li img {position: absolute; left: 0; top: 10px; width: 50px;}

<ul>
  <li><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/pencil.png">This is one liner.</li>
  <li><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/pencil.png">The most common type of pencil casing is of thin wood, usually hexagonal in section but sometimes cylindrical, permanently bonded to the core. Similar permanent casings may be constructed of other materials such as plastic or paper.</li>
  <li><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/pencil.png">The most common type of pencil casing is of thin wood, usually hexagonal in section but sometimes cylindrical, permanently bonded to the core. Similar permanent casings may be constructed of other materials such as plastic or paper. The most common type of pencil casing is of thin wood, usually hexagonal in section but sometimes cylindrical, permanently bonded to the core. Similar permanent casings may be constructed of other materials such as plastic or paper.</li>
</ul>

上述解决方案效果很好，但唯一的问题是为min-height设置<li>以容纳图像，而不是剪切或重叠图像。如果你非常懒，那么你可以考虑将文本内容用display: inline-block括在另一个元素中，但这很麻烦。无法在响应中工作。我的解决方案也是响应。

我在上面的代码片段中给出了三个例子。

单线/一线。
使用您提供的默认文字。
您原来拥有的文字内容的两倍。

图像浮动左侧和文本右侧（不在图像底部）

1 个答案: