使用固定標題滾動UL

Question

我有一個標題在一個div的ul，我試圖讓ul滾動，同時保持標題固定。我也想讓標題匹配ul的寬度。我能夠一次完成其中的一項，但不能同時完成。要麼我得到一個標題爲ul寬度的100％的標題，要麼我得到的標題在列表滾動時保持放置狀態，但與ul寬度不匹配。有人能指出我做錯了什麼嗎？

小提琴這裏：http://jsfiddle.net/9zcRy/2/

的HTML

<div class="talkingPointsHolder"> 
<div class="genericScriptsHolder"> 
    <span class="listHeader">List One</span> 

    <ul 
    class="scrollingList"> 
     <li>item 1.1</li> 
     <li>item 1.2</li> 
     <li>item 1.3</li> 
     <li>item 1.4</li> 
     <li>item 1.5</li> 
     <li>item 1.6</li> 
     <li>item 1.7</li> 
     <li>item 1.8</li> 
     <li>item 1.9</li> 
     <li>item 1.10</li> 
     <li>item 1.11</li> 
     <li>item 1.12</li> 
     </ul> 
</div> 
<div class="genericScriptsHolder"> 
    <span class="listHeader">List Two</span> 

    <ul 
    class="scrollingList"> 
     <li>item 2.1</li> 
     <li>item 2.2</li> 
     <li>item 2.3</li> 
     <li>item 2.4</li> 
     <li>item 2.5</li> 
     <li>item 2.6</li> 
     <li>item 2.7</li> 
     <li>item 2.8</li> 
     <li>item 2.9</li> 
     <li>item 2.10</li> 
     <li>item 2.11</li> 
     <li>item 2.12</li> 
     </ul> 
</div> 

的CSS

.talkingPointsHolder { 
    border: 1px solid black; 
    background: #eeeeee; 
    height: 200px; 
    overflow: auto; 
} 

.genericScriptsHolder { 
    float: left; 
    width: 48%; 
    margin: 0px 2px 0px 2px; 
    /* uncomment to make the title match the ul width (see listHeader too)*/ 
    /*position: relative;*/ 
} 

.listHeader { 
    color: #ffffff; 
    background: #444444; 
    padding: 10px 0px 10px 0px; 
    text-transform: uppercase; 
    font-weight:bold; 
    font-size:11px; 
    text-align: left; 
    text-indent: 1em; 
    position: absolute; 
    z-index:10; 

    /* uncomment to make the title match the ul width (see genericScriptsHolder too)*/ 
    /*width: 100%;*/ 
} 

.scrollingList { 
    position: relative; 
    top: 31px; 
} 

.scrollingList li { 
    overflow: auto; 
    height: 20px; 
    color: #666666; 
    background-color: #cccccc; 
    font-weight: lighter; 
    padding: 10px; 
    margin: 2px; 
    list-style-type: none; 
} 

Answer 1

http://jsfiddle.net/9zcRy/9/

.listHeader { 
color: #ffffff; 
background: #444444; 
padding: 10px 0px 10px 0px; 
text-transform: uppercase; 
font-weight:bold; 
font-size:11px; 
text-align: left; 
text-indent: 1em; 
position: absolute; 
z-index:10; 
width:46%; 

Answer 2

您需要定義元素的寬度，如果你正在使用position: absolute;

我設置寬度您.list-header，以配合您.genericScriptsHolder的寬度，然後相應地調整填充。

這裏的小提琴：http://jsfiddle.net/9zcRy/15/

請注意，我刪除了大家的滾動列表訂單項創建水平的利潤，而是編輯父.genericScriptsHolder元素的造型。

.genericScriptsHolder { 
    float: left; 
    width: 48%; 
    margin: 0px 5px 0px 5px; 
    /* uncomment to make the title match the ul width (see listHeader too)*/ 
    /*position: relative;*/ 
} 

.listHeader { 
    color: #ffffff; 
    background: #444444; 
    padding: 10px 0px 10px 0px; 
    text-transform: uppercase; 
    font-weight:bold; 
    font-size:11px; 
    text-align: left; 
    text-indent: 1em; 
    position: absolute; 
    width: 48%; 
    z-index:10; 


.scrollingList li { 
    overflow: auto; 
    height: 20px; 
    color: #666666; 
    background-color: #cccccc; 
    font-weight: lighter; 
    padding: 10px; 
    margin: 2px 0 0 0; 
    list-style-type: none; 
}