html - 文本环绕或 float 在 img 下方

Question

我试图在 img 旁边显示文本，但是当容器的大小减小时，文本会低于图像。

HTML:

 <ul>
     <li>
        <img src="http://www.google.com/s2/favicons?domain=api.jquery.com" /> 
        <div> <a href="#" >.append() | jQuery API Documentation </a> </div>
     </li>
</ul>

CSS:

.links { 
   width:100px; 
   font-size: 10px; 
   cursor: pointer; 
   display: block;
}

li {
   overflow:auto; 
   word-wrap:break-word; 
}

img {float:left;}

li div {float:left;}

a { 
    color:blue; 
    cursor: pointer; 
    background: white; 
    vertical-align:top;
}

在上面的代码中，a 标签中的文本不应该位于图像下方。但是，当我调整容器大小时，它会低于图像。我应该怎么做才能将其保留在图像旁边。我也不希望它换行。

Answer 1

下面的示例应该有效。不过，您可能希望正确对齐代码。很乱。我只是使用了“显示:内联 block ；”图片上的属性。

编辑:我也让代码块看起来更漂亮了。这是一个 JSFiddle。 https://jsfiddle.net/mrykqafg/1/

<ul style="width: 230px; font-size: 10px; cursor: pointer; display: block;" class="links">
     <li style='overflow:auto; word-wrap:break-word; '>
        <div style="width: 230px;">
            <div style="width: 49%;">
                <img src="http://www.google.com/s2/favicons?domain=api.jquery.com"
                    style="float:left; display: inline-block;">
            </div>
            <div style="width: 49%; padding-left: 30px">
                 <a href="" style="color: blue; cursor: pointer; 
                background: white; vertical-align:top;">
                .append() | jQuery API Documentation
            </a>
            </div>
        </div>           
     </li>
</ul>