2

divにタイトルのあるulがあり、タイトルを固定したままulをスクロールさせようとしています。また、タイトルをulの幅と一致させたいです。一度に1つは実行できますが、両方を一緒に実行することはできません。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;
}
4

2 に答える 2

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;
}
于 2013-02-13T20:55:23.580 に答える
0

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-13T20:47:06.020 に答える