javascript - 列表与页面顶部之间的空间

Question

我正在使用我在网站上找到的设计，它看起来非常酷，但我想将其更改为我需要的样子。

原来的demo是这样的

但我需要它们并排放置，所以我创建了一个宽度为 100% 且有两列的表格。我将两个列表都放在表中，但发生了一些奇怪的事情。

我已经检查过，顶部没有填充物，也没有其他物体。列表和表格都设置为 v-align。我附上了 jFiddle以获得更好的引用和帮助。

JSFiddle

非常感谢大家!

<table width="100%" border="0">
<tbody valign="top">
<tr valign="top">
  <td valign="top">
  <ul class="tabs">
      <li class="tabs__item color1">
        <h2><span>[Review] The New LG G18</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color2">
        <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color3">
        <h2><span>[APP] Goo Simulator Extreme</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color4">
        <h2><span>[Tutorial] Pooping Your Pants</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <div class="views-toggle views-toggle--hidden">
        <svg fill="white" viewBox="0 0 24 24">
          <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
          <path d="M0 0h24v24h-24z" fill="none"/>
        </svg>
      </div>
    </ul>
    <script       src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
  </td>
  <td valign="top">
  <ul class="tabs">
      <li class="tabs__item color1">
        <h2><span>[Review] The New LG G18</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color2">
        <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color3">
        <h2><span>[APP] Goo Simulator Extreme</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color4">
        <h2><span>[Tutorial] Pooping Your Pants</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <div class="views-toggle views-toggle--hidden">
        <svg fill="white" viewBox="0 0 24 24">
          <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
          <path d="M0 0h24v24h-24z" fill="none"/>
        </svg>
      </div>
    </ul>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
  </td>
 </tr>
 </tbody>
  </table>

Answer 1

这是您在 moveTabs 函数中需要的代码

 var indexOffset = 0;       
  tabs.each(function(index) {
    if ($(this).hasClass('tabs__first'))
       indexOffset = index-1;

    transY  = (index-indexOffset) * 10;        
    scale       = 0.5 + (index-indexOffset)/25;

然后将 tabs__first 添加到要“重置”的第一个元素的类中

这是如何运作的——

• 在循环中，我检查 tabs___first 标记 当我看到它时，我将偏移量设置为小于索引

• 在对元素进行转换而不是使用索引进行转换(如原始代码那样)时，我使用 index-indexOffset。

fiddle - https://jsfiddle.net/s4sc2mu1/2/