更改为块并添加&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

对block的更改来自：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%;
}

请尝试一下，并让我知道^^