列表中的特定項目與其他格式不一致

Question

我的問題是這樣的：我正在用鏈接填充一個無序列表，除了indexLink之外，所有格式都正確 - 它有一點縮進。我找不到問題，我已經仔細檢查了每個部分，重新​​編寫了包含從頭開始的鏈接的代碼，但仍然無法找到問題。下面是我的javascript：

function addCrumb() { 
    /* reads from localStorage and determines which links go where */ 
    for (i = hIndexCount; i >= 0; i--) { 
    if (localStorage.history.charAt(i) === "a") { 
     ridingHood[i] = '<a href="aboutme.html"><span class="aboutMeLink">About Me</span></a>'; 
    } else if (localStorage.history.charAt(i) === "e") { 
     ridingHood[i] = '<a href="experiments.html"><span class="experimentsLink">Experiments</span></a>'; 
    } else if (localStorage.history.charAt(i) === "i") { 
     ridingHood[i] = '<a href="../index.html"><span class="indexLink">Sprit Index</span></a>'; 
    } else if (localStorage.history.charAt(i) === "p") { 
     ridingHood[i] = '<a href="professional.html"><span class="professionalLink">Professional</span></a>'; 
    } else if (localStorage.history.charAt(i) === "s") { 
     ridingHood[i] = '<a href="school.html"><span class="schoolLink">School</span></a>'; 
    } 
    } 

    //window.alert(ridingHood + " " + h + " " + localStorage.history.length); 

    displayCrumbs(); 
} 

function displayCrumbs() { 
    ridingHood[hIndexCount] = '<li><span class="firstLink">' + ridingHood[hIndexCount] + '</span></li>'; 
    ridingHood[hIndexCount - 1] = '<li><span class="secondLink">' + ridingHood[hIndexCount - 1] + '</span></li>'; 
    ridingHood[hIndexCount - 2] = '<li><span class="thirdLink">' + ridingHood[hIndexCount - 2] + '</span></li>'; 
    ridingHood[hIndexCount - 3] = '<li><span class="fourthLink">' + ridingHood[hIndexCount - 3] + '</span></li>'; 

    /* cycles through and displays each ridingHood index */ 
    for (i = hIndexCount; i >= 0; i--) { 
    document.getElementsByClassName("history")[0].innerHTML += ridingHood[i]; 
    } 
} 

的HTML：

<nav> 
    <ul class="history"> 

    </ul> 
</nav> 

感謝您的時間！需要幫助請叫我。 :)

編輯：figured我只能上傳網站到學生服務器的一個實例，here we go！

Answer 1

在index.css您有：

.aboutMeLink, .schoolLink, .experimentsLink, .professionalLink { 
    height: 4.2em; 
    width: 0%; 
    z-index: -1; 
    position: relative; 
    margin: auto; 
    border-left: 6px solid rgba(255, 255, 255, 0); 
    border-right: 6px solid rgba(255, 255, 255, 0); 
    -webkit-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s; 
    -moz-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s; 
    -ms-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s; 
    -o-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s; 
    transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s; 
} 

您沒有包括在這個風格.indexLink，這樣的鏈接從其他環節得到不同的造型。給它添加.indexLink。

或者，不是列出所有這些類，而是給這些元素一個普通的類，如sidebarLink，並將該樣式應用於該類。