使用固定标题滚动UL

我有一个标题在一个div的ul，我试图让ul滚动，同时保持标题固定。我也想让标题匹配ul的宽度。我能够一次完成其中的一项，但不能同时完成。要么我得到一个标题为ul宽度的100％的标题，要么我得到的标题在列表滚动时保持放置状态，但与ul宽度不匹配。有人能指出我做错了什么吗？使用固定标题滚动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; 
}

来源

2013-02-13 Spencer

在拨弄，使用Chrome时，我去掉在CSS的宽度规则，我得到一个100％的宽度标题漂浮ontop的，因为它滚动列表... 这就是你想要达到什么样的不是吗？ – Michael 2013-02-13 20:47:32

我希望标题与下面ul的宽度匹配，并让它在它下面滚动（标题不应该滚动）。 – Spencer 2013-02-13 21:20:21

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%;

来源

2013-02-13 20:47:06 Garry

您需要定义元素的宽度，如果你正在使用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; 
}

来源

2013-02-13 20:55:23 lclum

这很有效，但是有没有办法让它成为ul的宽度？比方说，例如，ul可以稍后改变宽度。我想我只需要在两个元素上改变它就可以了。 – Spencer 2013-02-13 21:03:25

使用固定标题滚动UL

回答

相关问题