有没有办法确保图像至少与类别名称中的一个单词保持一致？

Question

我在<a>标记

中有一个内嵌列表的类别列表

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

css（less）

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

所以我的问题是 - ＆gt;有没有办法确保图像与类别名称中的至少一个单词保持一致（在同一行上），因为某些类别具有大名称。

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

Answer 1

您是否尝试过添加vertical-align：middle;

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

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

垂直对齐将确保图像在中间垂直对齐，并在其右侧显示文本

还取决于你的标记和你的需求，你可以添加浮动：左边的图像，并在图像旁边的文本周围添加一个跨度，并浮动它

<强>更新

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

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

    display:inline; /* add this property */

    margin: 0 4px 0 0;
}

您可能需要将display属性更改为inline-block

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

Answer 2

尝试

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

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