如何在菜单元素之间添加空格（在wordpress中）？

问题描述：

我在wordpress中工作，我有4个菜单项的菜单。问题在于他们彼此接触，并且在我看来，它们之间的空间很难看。如何在菜单元素之间添加空格（在wordpress中）？

现在这个问题只有发生在wordpress中。所以我必须找到一个解决方案如何在它们之间留出一些空间。

也许你们知道一个解决方案，而不必在WP上安装一些东西。

（中体代码是完全一样的在我的wordpress证明它的样子，你可以进入它，这将使之间的一些空间，但不幸的是这并不在WordPress的工作。）

<style> 
    .smallmenu { 
    margin: 0 auto; 
    max-width: 436px; 
    width: 100%; 
    } 

    .Capital { 
    margin: 0px 0 -5px 0; 
    line-height: 63px; 
    font-size: 60px; 
    font-weight: ligter; 
    } 

    .smalltext { 
    text-align: center; 
    margin-top: 0px !important; 
    font-weight: 100px; 
    font-size: 14px; 
    } 

    .smalltextpub { 
    text-align: center; 
    margin-top: 0px !important; 
    font-weight: 100px; 
    font-size: 14px; 
    margin-left: -5px; 
    } 

    .cornermenu { 
    display: inline-block; 
    margin: auto; 
    border-radius: 25px; 
    background: #769DBD; 
    padding: 20px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    color: #fff; 
    font-family: Arial; 
    padding-top: 10px; 
    text-decoration: none; 
    } 

    #hoverr:hover { 
    border-radius: 25px; 
    background: #464646; 
    padding: 20px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    color: #fff; 
    font-family: Arial; 
    padding-top: 10px; 
    text-decoration: none; 
    } 

    * { 
    box-sizing: border-box; 
    } 
</style> 
<div class="smallmenu"><a id="hoverr" class="cornermenu" href="#methods"><span class="Capital">M</span> 
<span class="smalltext">Methods</span></a><a id="hoverr" class="cornermenu" href="#background"><span class="Capital">B</span> 
<span class="smalltextpub">Background</span></a><a id="hoverr" class="cornermenu" href="#results"><span class="Capital">R</span> 
<span class="smalltext">Results</span></a><a id="hoverr" class="cornermenu" href="#publications"><span class="Capital">P</span> 
<span class="smalltextpub">Publications</span></a></div>

简单而直接的解决方案：之前和菜单项后加 “ ”。 –

谢谢！你的解决方案也可以 – Lego

答

只需在.cornermenu上设置固定的保证金。喜欢的东西margin: 2px

JSFiddle link

.cornermenu { 
    ... 
    margin: 2px; 
    ... 
    }

如何在菜单元素之间添加空格（在wordpress中）？

相关推荐