html:

<div class="nav-detail">
?<div class="team-introduction"><span>OUR TEAM</span></div>
?<div>
? ?<div class="personel-group">
? ? ?<ul id="personal-group-list">
? ? ? ?<li class="red-line">
? ? ? ? ?<div>
? ? ? ? ? ?<span>高管人員</span>
? ? ? ? ?</div>
? ? ? ?</li>
? ? ? ?<li>
? ? ? ? ?<div>
? ? ? ? ? ?<span>產品組</span>
? ? ? ? ?</div>
? ? ? ?</li>
? ? ? ?<li>
? ? ? ? ?<div>
? ? ? ? ? ?<span>程序組</span>
? ? ? ? ?</div>
? ? ? ?</li>
? ? ? ?<li>
? ? ? ? ?<div>
? ? ? ? ? ?<span>其他</span>
? ? ? ? ?</div>
? ? ? ?</li>
? ? ?</ul>
? ?</div>
? ?<div class="personel-group-picture" id="personel-group-picture">
? ? ?<div class="manager-portrait">
? ? ? ?<img src="../sprite/picture_03.png">
? ? ? ?<img src="../sprite/picture_03.png">
? ? ? ?<img src="../sprite/picture_03.png">
? ? ? ?<img src="../sprite/picture_03.png">
? ? ?</div>
? ? ?<div class="product-portrait">2</div>
? ? ?<div class="programmer-portrait">3</div>
? ? ?<div class="other-portrait">4</div>
? ?</div>
?</div>
</div>

css:

.nav-detail {
?text-align: center;
}

.team-introduction {
?margin-top: 98px;
?margin-bottom: 60px;
?font-size: 24px;
?font-weight: bold;
}
li {
?list-style-type: none;
}
#personal-group-list li{
? list-style-type: none;
? display: inline-block;
? width: 180px;
? font-size: 18px;
? color: #333;
? float: left;
? padding: 10px 0;
? border-bottom: 1px solid #D3D3CA;
}
.red-line {
?border-bottom: 3px solid red;
}
#personal-group-list li div {
?display: inline;
?width: 180px;
}
.personel-group {
?text-align: center;
?width: 720px;
?margin-left: auto;
?margin-right: auto;
}
.personel-group span {
?cursor: pointer;
}
.personel-group-picture {
?border-bottom: 1px solid #D3D3CA;
?width: 1200px;
?margin: 0 auto;
}
.manager-portrait {
?padding: 60px 0 60px 0;
?height: 364px;
}
.manager-portrait img {
?margin: 56px;
}
.product-portrait {
?display: none;
}
.programmer-portrait {
?display: none;
}
.other-portrait {
?display: none;
}

js:

window.onload = function () {
?var lists = document.getElementById('personal-group-list').getElementsByTagName('li')
?var divs = document.getElementById('personel-group-picture').getElementsByTagName('div')
?if (lists.length != divs.length) {
? ?return
?}
?for (var i = 0; i < lists.length; i ++) {
? ?lists[i].index = i
?}
}

但是打開瀏覽器的控制臺，查看element，li元素并沒有加上index這個屬性，求大神幫我看一下問題出在哪里？

還有就是給每個li添加一個border-bottom:3px solid red;為什么也加不上去？