想要內聯列表消失左右

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>