如何在wordpress中单行显示面包屑？

Question

我在 php 中有一个代码来显示它像这样输出的面包屑

the link i found the php code
输出
<div id="crumbs"><a href="http://localhost">Home</a> » <a href="http://localhost/about/">About The Tests</a> » <span class="current">Page Image Alignment</span></div>

它看起来像这样

#crumbs a,
#crumbs span {
    border-radius: 0px 10px 10px 0px;
    box-shadow: -3px 2px 18px -3px #000;
    background: #4489ff;
    width: max-content;
    display: inline-block;
    color: white;
    font-size: 17px;
    padding: 6px;
    font-weight: bolder;
    margin-left: -1px;
    margin-top: 1rem;
    text-decoration: none;
}

#crumbs span.current{
  background: #eef5ff !important;
  color: black !important;
}

<center>
<!-- Do Not use <center> tag ! !-->


<div id="crumbs"><a href="http://localhost">Home</a>  <a href="http://localhost/about/">About The Tests</a>  <span class="current">Page Image Alignment</span></div>


<!-- Do Not use </center> tag ! !-->
</center>

我想把面包屑做成单行并且喜欢这样。 我已经完成了 90%，但我不知道如何像图像一样显示盒子阴影

请告诉我怎么做。 感谢您的帮助！

图片桌面

图片手机

Answer 1

编辑：我删除了绝对定位方法，将其居中并使其具有响应性。

.crumbswrapper {text-align: center;}
#crumbs {
  text-align: left;
  display: inline-block;
  font-family: roboto;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}
.innerwrap {
  display: inline-block;
  background:#4489ff;
  padding-right: 10px;
  margin: 0 0 0 -5px;
}
.innerwrap:last-child {
  background: none;
}
.innerwrap:nth-last-child(2) {
  background: #eef5ff;
}
#crumbs a, #crumbs span {
  background:#4489ff;
  border-radius: 0 20px 20px 0;
  box-shadow: 5px 0 10px -4px #444;
  color: white;
  padding: 10px 25px 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 34px;
}
.innerwrap:nth-last-child(2) a {
  box-shadow: none!important;
}

#crumbs span.current{
  background: #eef5ff !important;
  box-shadow: none!important;
  white-space: nowrap;
  color: #4489ff!important; 
}

<div class="crumbswrapper">
  <div id="crumbs">
    <div class="innerwrap"><a href="http://localhost">Home</a></div>
    <div class="innerwrap"><a href="http://localhost/about/">About The Tests</a></div>
    <div class="innerwrap"><span class="current">Page Image Alignment</span></div>
  </div>
</div>