html - 更改为 block 并添加 后 Wordpress 跨度宽度不变

Question

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

用图片说明最简单。

我想做什么:

顶部的两个方 block 显示了 wordpress 投资组合类型跨度的默认方式，底部的两个方 block 是我希望如何显示投资组合类型。

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

/*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%;
}

请试试这个，让我知道^^