html - 文字在img下方换行或 float

我正在尝试在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标记中的文本上方的代码中，不应将其置于图像下方。但是，当我调整容器大小时，它会位于图像下方。我应该怎么做才能将其保留在图像旁边。我也不想把它包起来。

最佳答案

下面的示例应该工作。您可能需要适当对齐代码。太乱了我只是使用了“显示：内联块；”图片上的属性。

编辑：我也使代码块看起来更好。这是一个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>

关于html - 文字在img下方换行或 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30440829/