wordpress中的代码无效，但它在其他平台上运行

Question

我有一个代码，其中4个圆圈彼此相邻。它正在开发codepen，jsfiddle等网站。但是在wordpress上，它看起来并不一样。

我在wordpress论坛上问了这个问题，但他们无法帮助我。

jsfiddle上的

https://jsfiddle.net/mq2fdbvz/示例

真实wordpress网页上的

http://giscience.zgis.at/de/concept-projekte-page/示例

那么交易是什么？我的代码或wordpress有什么问题吗？

编辑：代码已经置于文本模式，没有任何标签。并且代码正在另一个wordpress网页上工作，在这个wordpress页面上它不是。

<style>
.smallmenu {
    margin: 0 auto;
    max-width: 436px;
    width: 100%;
}
.circlemenu {
    display: inline-block;
    margin: auto;
    width: 106px;
    height: 107px;
    margin-bottom: 18px;
    border: solid 2px #73B7DB;
    background: #73B7DB;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    text-align: center;
    line-height: 440%;
    font-size: 22px;
    text-decoration: none;
}
</style>

<p style="text-align: center;"><span style="font-size: 24pt;">Mit dem Fahrrad zur Schule? Aber sicher!</span></p>
<p style="margin: 2% 20% 2% 20%;">Es gibt viele gute Gründe, mit dem Fahrrad zur Schule zu fahren. Lerne sie kennen und plane deine persönliche, sicherste Route.</p>
&nbsp;
<div class="smallmenu">
    <a class="circlemenu" href="#why" id="hovermenu"><font color="white">Warum</font></a>
    <a class="circlemenu" href="#what" id="hovermenu"><font color="white">Was</font></a>
    <a class="circlemenu" href="#how" id="hovermenu"><font color="white">Wie</font></a>
    <a class="circlemenu" href="#quiz" id="hovermenu"><font color="white">Quiz</font></a>
</div>

Answer 1

很可能你是在编辑模式下粘贴代码而wordpress正在添加换行符。

可以通过两种方式修正：

• 将所有href放在一行

  <div class="smallmenu"> <a class="circlemenu" href="#why" id="hovermenu"><font color="white">Warum</font></a> <a class="circlemenu" href="#what" id="hovermenu"><font color="white">Was</font></a> <a class="circlemenu" href="#how" id="hovermenu"><font color="white">Wie</font></a> <a class="circlemenu" href="#quiz" id="hovermenu"><font color="white">Quiz</font></a></div>
  

• 将代码粘贴到Text View而不是Visual Mode

Answer 2

并删除a.circlemenu之间的<br>。

如果您使用WordPress编辑器，请尝试仅将其保留在oneline上。像这样：

<a class="circlemenu" href="#why" id="hovermenu"><font color="white">Warum</font></a><a class="circlemenu" href="#what" id="hovermenu"><font color="white">Was</font></a><a class="circlemenu" href="#how" id="hovermenu"><font color="white">Wie</font></a><a class="circlemenu" href="#quiz" id="hovermenu"><font color="white">Quiz</font></a>

请记住从以下地址更改此CSS：

height: 107;

为：

height: 107px;

Answer 3

主要问题是您的div

之间有</br>个标记

    <a id="hovermenu" class="circlemenu" href="#why">
<font color="white">Warum</font>
</a>
<br>
<a id="hovermenu" class="circlemenu" href="#what">
<font color="white">Was</font>
</a>
<br>

尝试删除那些<br>标记。它会解决你的问题。