更改为阻止并添加 &nbsp 后，Wordpress 跨度宽度没有变化

Question

目前，我正在开发的一个 wordpress 网站上有一个跨度，默认情况下每个投资组合条目都会出现在一个有趣的地方。

用图片来说明是最容易的。

我想做的事：

顶部的两个方块显示 wordpress 投资组合类型跨度的默认值，底部的两个方块是我想要显示投资组合类型的方式。

这是我试图用来解决此问题的代码，后面是模仿结果的图像。我在图片下方提供了我的解决方案的来源：

/*Hard-code parent position relative to itself so that we can position its children absolutely across the board*/

  .tmb.tmb-iso-w4.tmb-iso-h4.tmb-light.tmb-overlay-text-anim.tmb-reveal-bottom.tmb-overlay-anim.tmb-content-left.tmb-text-space-reduced.tmb-image-anim.grid-cat-97.tmb-id-69092.tmb-img-ratio.tmb-content-under.tmb-media-first.tmb-no-bg
 {
    position: relative;
    left: 0px;
    top: 0px;
}

/*Change the span to block to change width. Input nbsp to content to try and remove empty space at the end of the word*/

span.portfolio-type{
    content: "\7C\a0\a0";   
    display:block;
    position: absolute;
    width: 40px;
    left: 10%;
    top: 100%;
}

这是结果。定位……工作！宽度...变化很大！：

正如您在检查中看到的，宽度是问题所在：

我试过改变高度，它有效！很明显这是一个宽度问题，但我不知道为什么。由于这个投资组合类型的功能是 wordpress 内部的东西，我只能真正改变使用 CSS。

我从中得出的解决方案：

父/子格式（这样我可以确保所有相同跨度的位置都在同一位置）来自 Stephen Denken 提供的解决方案：Position an HTML element relative to its container using CSS

阻止的更改来自：Does height and width not apply to span? - 关于这个主题有很多主题

那么换成nbsp的尝试来自：nbsp not working in CSS content tag

Answer 1

我使用检查模式并从“.tmb .t-entry-text .t-entry-text-tc .t-entry>*:not(hr):last-child”中删除宽度，从“span”中删除宽度.portfolio-type" 并从左更改：10% 到右：0。

span.portfolio-type{
    content: "\7C\a0\a0";   
    display:block;
    position: absolute;
    //width: 40px;
    //left: 10%;
    right: 0;
    top: 100%;
}

请试试这个并告诉我^^