如何用跨度分隔div中的單詞

Question

我在用span分隔div中的單詞時遇到麻煩。 這是html：

<div class="footer-links">
                    <span><a href="#">Suggestions</a></span>
                    <span><a href="#">Help</a></span>
                    <span><a href="#">Contact us</a></span>
                </div>

和CSS：

.footer-links{
    float: right;
    margin-top: 11px;
    margin-bottom: 11px;
}

JS撥弄她==> https://jsfiddle.net/kxdnwL4k/3/

如何分隔單詞，使用戶更容易閱讀？

非常感謝

Answer 1

只需向span s添加水平margin 。 您可以使用:not(:first-child)或span + span排除第一個

 .footer-links { margin: 11px 0; float: right; } .footer-links span:not(:first-child) { margin-left: 1em; } 

 <div class="footer-links"> <span><a href="#">Suggestions</a></span> <span><a href="#">Help</a></span> <span><a href="#">Contact us</a></span> </div> 

Answer 2

我假設您是說這些單詞太接近閱讀了。

 .footer-links{ float: right; margin-top: 11px; margin-bottom: 11px; word-spacing: 5px; letter-spacing: 2px; } 

 <div class="footer-links"> <span><a href="#">Suggestions</a></span> <span><a href="#">Help</a></span> <span><a href="#">Contact us</a></span> </div> 

我使用letter-spacing來word-spacing一些字母，而word-spacing來在單詞之間留出一些空間。

Answer 3

為什么不僅僅使用margin css屬性使它們看起來更清晰？

.footer-links a {
  margin: 0 5px 0 5px;
}

 .footer-links { float: right; margin-top: 11px; margin-bottom: 11px; } .footer-links a { margin: 0 5px 0 5px; } 

 <div class="footer-links"> <a href="#">Suggestions</a> <a href="#">Help</a> <a href="#">Contact us</a> </div> 

Answer 4

我建議對鏈接列表使用ul-始終最好使用正確的工具進行工作。

請注意，我已將此ul放入<footer>元素中-如果您未使用HTML5文檔類型，請使用div。 那么這只是對ul lis加上邊距的一種情況，並且您有一個水平列表，其中有li隔開。

您也可以看中並在反映當前頁面的li上應用“活動”類。 然后，您將獲得與頁面間隔且與頁面相關的頁腳鏈接的列表。

 .footer-links { list-style:none } .footer-links li { display:inline; margin-right:30px } 

 <footer> <ul class="footer-links"> <li><a href="#">Suggestions</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact us</a></li> </ul> </footer>