Question

我有一个项目列表，我试图将图像放在某些文本旁边而不包装到下一行。为了更好地说明，我在小提琴中创建了一个简化版本。

<ul>
    <li>Test</li>
    <li>
        <div id="TEST2"><span>Test 2</span></div>
        Image
    </li>
    <li>Test3</li>
</ul>

问题是：如何让“Image”文本在Test2 div的同一行（右侧）而不是下一行？ “测试”应该仍然高于“测试3”仍应低于。

我注意到如果我将结束div标签放在文本之后，它就完成了我的目标 - 但在我的实际代码中，div元素是在Javascript中动态创建的，我更喜欢将图像放在html中如果可能的话。

以防万一：我使用的是Firefox 27.0.1

Answer 1

display:inline;或display:inline-block;（Difference）是显示div内联的方式。

<ul>
    <li>Test</li>
    <li>
        <div id="TEST2" style="display:inline;"><span>Test 2</span></div>
        Image
    </li>
    <li>Test3</li>
</ul>

http://jsfiddle.net/mLBbE/

Answer 2

如果您不能影响DIV的生成方式 - 您可以对其应用外部内联样式，例如

li > div {
    display:inline-block;
}

演示：http://jsfiddle.net/KCdg3/5/

这将自动使LI中的任何DIV成为内联元素 - 而不会影响生成的HTML结构。您可以根据需要微调CSS选择器。

Answer 3

Double，您可以为TEST2的css添加样式。将其显示为内联块。

#TEST2 {
    display: inline-block;
}

没有包装的HTML列表项

3 个答案: