Javascript 希望内联列表在左右两侧都消失吗

我正在做一个新项目的原型，我希望日历像内联列表一样显示。 到目前为止没有什么大不了的，但有一点棘手的是，我希望它在调整窗口大小时显示较少的日期，并且仍然将当前日期集中在窗口中

我在下面的代码，只是用.content的overflow:hidden和ul的white space:nowrap实现了这个魔术，使右侧消失了（见图）。但仍然如此。不是我要找的。黄色的当前框应居中。。。拉扯我的头发，做一个掌纹

Javascript很好，但如果你有一个css解决方案，那就更好了。：）

这里还有一支笔

html非常直接

<div class="m-racecards">
 <div class="content">
    <ul>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li class="current">18</li>
      <li>19</li>
      <li>and so on.... </li>
  </ul>
</div>

十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
18
十九,
等等

---

您可以使用下面这样的jQuery实现这一点：）

$（'.current'）。每个（函数（）{
var leftCur=$（this）.position（）.left，
ulwrapHalfWidth=$（'.ulwrap'）.width（）/2，
elHalfWidth=$（this）.outerWidth（）/2；
$（this.parent（）.css）({
左：（UlwravalfWidth-leftCur-elHalfWidth）
});
});
$（'.ulwrap ul'）。在（'click'，'li'，function（）上{
$（'.ulwrap ul li'）.removeClass（'current'）；
$（this.addClass（'current'）；
var leftCur=$（this）.position（）.left，
ulwrapHalfWidth=$（'.ulwrap'）.width（）/2，
elHalfWidth=$（this）.outerWidth（）/2；
$（this）.parent（）.animate({
左：（UlwravalfWidth-leftCur-elHalfWidth）
}, 300);
});
.content{
背景：红色；
位置：相对位置；
填充：5%；
最大宽度：50%；
保证金：0自动；
溢出：隐藏；
文本对齐：居中；
}
乌尔瓦普先生{
溢出：隐藏；
宽度：100%；
}
保险商实验室{
空白：nowrap；
位置：相对位置；
}
李{
字体大小：25px；
显示：内联表；
填充：10px；
光标：指针；
}
.当前{
背景：黄色；
}


一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
18
十九,
二十
二十一,
二十二
二十三
等等

在此处或jsfiddle发布您的html css！因此，我们可以不费吹灰之力就解决这个问题，现在也添加了html。。现在只是一个有ul列表的div…现在是一支笔。：）真是个好答案！这正是我要找的。你让我开心，伙计。：）很高兴我能帮上忙：）我也很喜欢用光标做额外的小动作……）
<div class="m-racecards">
 <div class="content">
    <ul>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li class="current">18</li>
      <li>19</li>
      <li>and so on.... </li>
  </ul>
</div>