html - 有没有办法确保图像至少包含一个类别名称的单词？

Question

我有一个与<a>标签内的图像内联的类别列表

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

CSS（少）

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

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

类别列表

score 1 · Accepted Answer

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

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

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

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

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

更新

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

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

    display:inline; /* add this property */

    margin: 0 4px 0 0;
}

您可能必须将显示属性更改为 inline-block

另外，如果您设置了 jsfiddle 或 codepen，我们可以更好地帮助您:)

score 0 · Accepted Answer

尝试

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

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

2 回答 2