使用自定义css时，Elementor标头会中断

Question

我有一个在Elementor中构建的标题，按钮需要应用自定义CSS。出于某种原因，当我以这种方式构建按钮时，它会导致标题中断并转到下一行。我已经尝试了一切，包括在Dreamweaver中对整个标头进行编码，然后将其作为一个html框插入，但它仍然可以做同样的事情。我已经为下面的按钮写下了代码，有5个按钮加上一个徽标，但如果我添加了两个以上的按钮，就会出现问题。

<div class="svg-wrapper" style="white-space:nowrap;">
<div align="centere">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<p>
<a href=""><span class="spot"></span>EXPERIENCES</a>
</p>
</div>
</svg>
</div>

<style>

.svg-wrapper {
margin-top: 0;
position: relative;
display: inline-block;
border-radius: 3px;
}
#shape {
stroke-width: 6px;
fill: transparent;
stroke: #fb9715;
stroke-dasharray: 85 400;
stroke-dashoffset: -220;
transition: 1s all ease;
}
#text {
margin-top: -42px;
text-align: center;
}

.svg-wrapper:hover #shape {
stroke-dasharray: 50 0;
stroke-width: 3px;
stroke-dashoffset: 0;
stroke: #fb9715;
}
</style>

Answer 1

您是否尝试使用检查工具检查代码？？？有时elementor会添加额外的代码。