點出現旁邊的字體真棒漢堡菜單

Question

在小屏幕上（< 720px）我有一個切換菜單與字體真棒圖標。

我昨天注意到在菜單之前出現了一個句號。我無法弄清楚這是從哪裏來的。

問題點。

的菜單的代碼（取自開發工具。）

<ul id="toggle-menu"> 
    <li class="pullDown"> 
     <a href="#" id="pull"> 
      <i class="fa fa-bars fa-3x "></i> 
     </a> 
    </li> 
</ul> 

它也出現在這條線內的DOM，即使李中的所有元素都將被刪除。

<li class="pullDown"></li> 

該網站是here

完整的代碼是提前

Answer 1

在你的style.css here

由於添加以下代碼

#toggle-menu li { 
    float: right; 
    list-style-type: none; 
} 

見here爲它在行動中的例子。

dot存在的原因是您將它添加爲列表元素 - 它不是一個句號，必然只是無序列表中新元素的標記。 list-style-type:none擺脫列表元素的任何樣式。

Answer 2

這不是一個句號，它是一個列表項目的子彈。您正在使用的列表，包括<li>標籤，默認行爲是擺在這裏無論是<li>

內真正的答案前一顆子彈，雖然是你的代碼是不是很語義正確。爲什麼一個圖標放在無序列表中呢？考慮其他兩個選項...

1）只是把<a>包含您的圖標在導航的前面，並在此 2離開它）包含的字體真棒圖標爲：前或：的僞元素之後導航菜單本身使用CSS樣式。有關如何通過CSS添加圖標的信息可以在字體真棒網站上找到。

Answer 3

您切換菜單類應該包含這樣的

list-style: none;