css - 将文本和图像放在不同的行中

Question

我有一个类似的代码

<span ><img src="xxx.png">Tab1</span><span ><img src="yyy.png">Tab2</span>

此代码创建了两个选项卡，但唯一的问题是 tab1/tab2 和图像 xxx/yyy 在同一行。我希望它们在不同的行中，并且我希望两个 span 元素在同一行中。选项卡应如下所示

在此处输入图像描述

score 2 · Accepted Answer

2

浮动：css的left属性将有助于您的工作

于 2012-05-10T15:23:45.653 回答

score 0 · Accepted Answer

0

我认为标记是理所当然的：

img { display: block; }
span { float: left; }

于 2012-04-08T17:09:04.793 回答

score 0 · Accepted Answer

您可能使用了错误的元素。<span>用于内联内容，而<div>可能更适合您想要做的事情。您希望它们在新行上，但 span 是专门为非换行项创建/使用的。

尝试这个：

<div><img src="xxx.png">Tab1</div><div><img src="yyy.png">Tab2</div>

3 回答 3