将文本浮动到侧栏的图像右侧

Question

我走到这一步，但我似乎无法让文字Product 1 Title显示在旁边的图像的右侧和顶部。其他文字seller需要显示在其下方。

直到这一次，我尝试了从左边的图像浮动到几乎所有其他的一切，但我得到的都是奇怪的结果。我在stackoverflow上也尝试了几个建议，但我怀疑它与css的其余部分有关（不能改变）。

我已经删除了与此相关的身体和css的其余部分，并在此处仅发布了问题。你能帮忙吗？

我已经发布了它的显示方式，以及我正在努力实现的结果。

Fiddle

这是问题的一部分：

<div id="contentright">
            <div id="sidebar" class="clearfix">
                <div class="menu">
                    <ul>
                        <li>
                            <img src="/resources/images/demo-1.jpg" style="float:left"><span style="margin-left:5px;">Product 1 Title</span><span>Seller</span>
                        </li>

                        <li>
                            <img src="/resources/images/demo-1.jpg" style="float:left"><span style="margin-left:5px;">Product 1 Title</span><span>Seller</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

Answer 1

.menu li {
    border-top:1px solid #ebebeb; 
    list-style-type: none;
    margin: 0;
    display:inline-block; /* added */
    width:100%; /* added */
    padding: 5px;
}

float:left;的{​​{1}}提出了问题，因此底部.image仅通过提供<li>来获取<li>中显示的文字的高度inline-block这里的全高度将是小提琴

Js Fiddle

Answer 2

.menu li {
border-top:1px solid #ebebeb; 
list-style-type: none;
margin: 0;
padding: 5px;
overflow: hidden;//added

}

因为'img'dom已经浮动，但是父dom'li'不干净，所以img dom可以自由地进入domlist。

Answer 3

一个简单的解决方案是将clear: left添加到此类：

.menu li {
    border-top:1px solid #ebebeb; 
    list-style-type: none;
    margin: 0;
    padding: 5px;
    clear: left;/*Add clear left*/
}

fiddle