使用固定标题滚动UL [英] Scrolling UL with fixed header

问题描述

我有一个标题在一个div，我试图做ul滚动，同时保持标题固定。我也想要标题匹配的宽度的ul。我能够一次做其中的一个，但不能在一起。我得到一个标题是ul的100％的宽度，或者我得到一个标题，当列表滚动，但它不匹配ul的宽度。有人可以指出我做错了什么吗？

这里： http://jsfiddle.net/9zcRy/2/

HTML

 < div class =talkingPointsHolder> 
< div class =genericScriptsHolder> 
< span class =listHeader>列表一< / 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>列表两个< / 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>项目2.10< / li> 
< li> item 2.11< / li> 
< li>项目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使标题匹配ul宽度（参见listHeader）* / 
 / * 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; 
 
 / *注释使标题与ul宽度匹配（参见genericScriptsHolder）* / 
 / * 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; 
} 
  
 
 
解决方案
如果你使用 position：absolute;  
 
 
 
我设置了你的 .list-header 以匹配 .genericScriptsHolder 的宽度，然后相应地调整填充。
 
 
 
这里是小提琴： http://jsfiddle.net/9zcRy/15/  
 
 
 
请注意，我删除了您为滚动列表订单项创建的水平边距，而是编辑父项 .genericScriptsHolder 元素。
  .genericScriptsHolder {
 float：left; 
 width：48％; 
 margin：0px 5px 0px 5px; 
 / * uncomment使标题匹配ul宽度（参见listHeader）* / 
 / * 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; 
} 
  
 
I have a ul with a title in a div and I'm trying to make the ul scroll while keeping the title fixed.  I also want to have the title match the width of the ul.  I'm able to do one of those at a time, but not both together.  Either I get a ul with a title that is 100% of the ul width, or I get a title that stays put when the list scrolls, but it doesn't match the ul width.  Can someone point out what I'm doing wrong?

fiddle here: http://jsfiddle.net/9zcRy/2/

The 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>


The 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;
}

解决方案
You need to define the width of an element if you're using position: absolute;

I set the width your .list-header to match the width of your .genericScriptsHolder and then adjusted the padding accordingly.

Here's the fiddle: http://jsfiddle.net/9zcRy/15/

Notice that I removed the horizontal margins that you created for the scrolling list line items and instead edited the styling on the parent .genericScriptsHolder element.
    .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;
}


                        
这篇关于使用固定标题滚动UL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！