Question

我有一个带有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;
}

Answer 1

如果您使用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;
}

Answer 2

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

使用固定标题滚动UL

2 个答案: