Html 是否有办法确保图像至少保留类别名称中的一个单词？

我已经在

标签内的图像中列出了一个类别列表

<div>
 <a><img>categoryname</a>
 <a><img>categoryname</a>
 <a><img>categoryname</a>
 <a><img>categoryname</a>
</div>

所以我的问题是->有没有办法确保图片至少保留一个类别名称的单词（在同一行上），因为有些类别有大名

• 我不能使用背景图像，因为IE7（关于图像位置的错误）
• 我无法更改类别的顺序

试试看

    .categorie a {
        display:inline;
        margin: 0 4px 0 0;
    }

---

它应该将a标记设置为不包装其内容，而是将容器设置为包装其内容。

是否尝试添加垂直对齐：中间

.categorie {
    white-space: normal;
}
.categorie a {
    white-space: nowrap;
    display: inline-block;
    padding: 0 4px 0 0;
}

<> P>垂直对齐将确保图像垂直排列在中间，右边的文本

根据您的标记和需要，您还可以将float:left添加到图像中，并在图像旁边的文本周围添加一个跨距，并将其浮动

更新

尝试在A标记上使用float:left：

.categorie a {
    display:inline;
    margin: 0 4px 0 0;

    vertical-align:middle; /* add this property */
}

您可能必须将“显示”特性更改为“内联块”

---

另外，如果您设置了JSFIDLE或codepen，我们可以更好地帮助您：）

您是否尝试将

a

设置为

内联块

？是否可以添加其他标记？问题是，创建一个块并将长类别名称放在下一行。您使用的浏览器有此问题吗？我仍然无法保留至少一行的图像类别名称中至少有一个单词：-（为什么不为菜单使用UL列表呢..然后向左浮动LI标记..这样您的菜单项都将包含在自己的LI标记中..通常列表与UL和LI标记一起使用我会使用LI方法，特别是考虑到LIs可以有自己的自定义项目符号图像，允许您将图像对齐到位，并避免ba地面图像。

.categorie a {
    float:left;  /* add this property */

    display:inline; /* add this property */

    margin: 0 4px 0 0;
}