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

以下示例应该有效。您可能希望正确对齐代码。这很麻烦。我只是使用了“display：inline-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>

Answer 2

使用display: table[-cell]代替float。

li {display: table}
li > * {display: table-cell}

http://jsfiddle.net/t2qn05tu/1/

Answer 3

如果你想使用左边的浮动，试试这个：

/* Add class 'links' to the ul */
    .links {
        width: 100px;
        font-size: 10px;
        cursor: pointer;
        display: block;
    }

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

    img {
        float: left;
    }

    div {
        display: inline;
    }

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

文字在img下方包裹或浮动

3 个答案: