如何在菜單元素之間添加空格（在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>

來源

2017-08-15 Lego

簡單而直接的解決方案：之前和菜單項後加「」。 –

謝謝！你的解決方案也可以 – Lego

只需在.cornermenu上設置固定的保證金。喜歡的東西margin: 2px

JSFiddle link

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

來源

2017-08-15 13:57:51 Normangorman

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

回答

相關問題