希望内联列表左右消失

Question

我在一个新项目上进行原型设计，我希望日历显示为内联列表。 到目前为止没什么大不了的，但是有点棘手的部分是我希望它在窗口调整大小时显示更少的日期，并且仍然将当前日期置于窗口中心。

我的代码在这里，只是让右侧消失（见图片）.content的溢出：隐藏和ul的白色空间：nowrap做魔术。但仍然。不是我想要的。黄色电流盒应该居中...... 拖动我的头发并执行facepalm

Javascript很不错但是如果你有一个css的解决方案，那就更好了。 :)

这也是一支笔。http://codepen.io/PatJarl/pen/eLJyr

.m-racecards {

    .content {

        padding: 5%; 
        max-width: 80%;
        margin: 0 auto;      
        overflow: hidden; 
        text-align: center; 

        ul {
            white-space: nowrap; 

            li {
                font-size: 25px; 
                display: inline-table;
                padding: 10px; 
            }
        }

        .current {
            background: $proto-yellow; 
        }
    } 
}

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>

Answer 1

你可以用这样的小jQuery来实现它：）

$('.current').each(function() {
  var leftCur = $(this).position().left,
    ulwrapHalfWidth = $('.ulwrap').width() / 2,
    elHalfWidth = $(this).outerWidth() / 2;


  $(this).parent().css({
    left: (ulwrapHalfWidth - leftCur - elHalfWidth)
  });

});

$('.ulwrap ul').on('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({
    left: (ulwrapHalfWidth - leftCur - elHalfWidth)
  }, 300);
});

.content {
    background: red;
    position: relative;
    padding: 5%;
    max-width: 50%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}
.ulwrap {
    overflow: hidden;
    width: 100%;
}
ul {
    white-space: nowrap;
    position: relative;
}
li {
    font-size: 25px;
    display: inline-table;
    padding: 10px;
    cursor: pointer;
}
.current {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="m-racecards">
  <div class="content">
    <div class="ulwrap">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <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>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>and so on....</li>
      </ul>
    </div>
  </div>
</div>