水平<ul>，具有固定的第一个元素</ul>

Question

我有<ul/>水平设置，并且包含在<div/>内，以便当<ul/>溢出时，您可以滚动<div/>以查看休息。它看起来像这样：

jsFiddle

HTML：

<div>
    <ul>
        <li>HEADER</li>
        <li>Item1</li>
        <li>Item2</li>
        <!-- Additional items -->
    </ul>
</div>

CSS：

div {
    white-space:nowrap; overflow-x:scroll; width:100%;}
ul {
    list-style-type:none; }
li {
    display:inline-block; }

是否有办法在滚动溢出时“修复”<ul/>的第一个元素？

第一个元素（带有文字"HEADER"）应保留在原位，其余项目会滚动。我意识到可能没有“优雅”的解决方案。

我尝试将"HEADER"项目作为<ul/>之外的单独元素，但由于我将<ul/>宽度设置为100%，因此它会生成整个<ul/> {1}}在浏览器窗口外溢出。

我使用jquery标记了问题，因为a）我已在我的应用程序中使用jquery，并且b）我认为可能$.clone()元素和“修复“它到位。这可能就是答案，但我正在努力解决具体实施或是否有更简单的方法来实现这一目标。

Answer 1

根据您的小提琴，只需更改/添加以下CSS：（Fiddle）

ul {
    list-style-type:none;
    margin-left: 85px;
}

li:first-child {
    position: fixed;
    margin-left: -85px;
    background-color: white;
}

需要设置固定标题的背景，以便在其后面看不到滚动的li。

Answer 2

我想玩位置：现在固定一段时间，所以这就是我想出来的，你显然需要更多地玩它。此外，您可以look at the fiddle here。

<div class="full">
    <div class="topdiv">
        <ul>
            <li class="fix">HEADER</li>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li>Item4</li>
            <!-- Additional items -->
        </ul>
    </div>
</div>

.full{
    display : block;
    float : left;
    width : 500px;
}
.topdiv {
    width : 200px;
    overflow : auto;
}
ul {
    width : 1000px;
}
li {
    display : block;
    float : left;
    left : 300px;
    margin-left : 50px;
    margin-top : 25px;
}
.fix {
    position : fixed;
    left : 0px;
    margin-left : 0px;
    margin-top : 0px;
}

Answer 3

这会很好但很难移动第二个li

li:first-child {
    position:fixed;
    width:80px;
    background-color:white;

}

所以如果可以将标题移到ul之外，这是一个更容易的解决方案：

<style type="text/css">
* {
    margin:0; padding:0;
}
div {
    width:100%;
    white-space:nowrap;
    overflow-x:scroll;
    border:1px solid blue;
}
ul {
    list-style-type:none;
    position:relative;
    left:100px;
}
li {
    border:1px solid black;
    display:inline-block;
    width:80px;
}
span {
    position:fixed;
    overflow:hidden;
    width:80px;
    background-color:white;
    z-index:10;
}
</style>


<span>HEADER</span>
<div>
    <ul>
        <li>HEADER</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item10</li>
        <li>Item11</li>
        <li>Item12</li>
        <li>Item13</li>
        <li>Item14</li>
        <li>Item15</li>
        <li>Item16</li>
        <li>Item17</li>
        <li>Item18</li>
        <li>Item19</li>
        <li>Item20</li>
        <li>Item21</li>
        <li>Item22</li>
        <li>Item23</li>
        <li>Item24</li>
        <li>Item25</li>
        <li>Item26</li>
        <li>Item27</li>
        <li>Item28</li>
        <li>Item29</li>
        <li>Item30</li>
        <li>Item31</li>
        <li>Item32</li>
        <li>Item33</li>
        <li>Item34</li>
        <li>Item35</li>
        <li>Item36</li>
        <li>Item37</li>
        <li>Item38</li>
        <li>Item39</li>
        <li>Item40</li>
        <li>Item41</li>
        <li>Item42</li>
        <li>Item43</li>
        <li>Item44</li>
        <li>Item45</li>
        <li>Item46</li>
        <li>Item47</li>
        <li>Item48</li>
        <li>Item49</li>
        <li>Item50</li>
    </ul>
</div>