列表中第一个元素和第二个元素之间的较大差距

Question

在下面的列表中，跨度不与其对应点的中心对齐。我相信这是由第一和第二跨度之间的较大差距造成的。

HTML

<nav class="side-nav-right"> 
    <ul> 
     <li class="bullet"> 
      <a data-scroll href="#center-splash"><span style="width: 66px; left: -80px;">Intro</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section1"><span style="width: 66px; left: -80px;">section1</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section2"><span style="width: 66px; left: -80px;">section2</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section3"><span style="width: 66px; left: -80px;">section3</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section4"><span style="width: 66px; left: -80px;">section4</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section5"><span style="width: 66px; left: -80px;">section5</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section6"><span style="width: 66px; left: -80px;">section6</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section7"><span style="width: 66px; left: -80px;">section7</span></a> 
     </li> 
    </ul> 
</nav> 

SCSS

.side-nav-right { 
    display: block; 
    position: fixed; 
    top: 20%; 
    right: 1rem; 

    ul { 
     list-style: none outside; 

     li { 
      margin-bottom: 1rem; 

      a { 
       color: transparent; 
       display: block; 
       width: 1rem; 
       height: 1rem; 
       border-radius: 50%; 
       background: $light-text; 
       box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red; 
       vertical-align: top; 

       &.active { 
        background: #808080; 
        box-shadow: none; 
       } 
      } 

      span { 
       color: $light-text; 
       position: absolute; 
       background: rgba(0,0,0,0.7); 
       display: none; 
       padding: 0.25rem 0.5rem; 
       border-radius: 3px; 
       vertical-align: middle; 
      } 

      span:before { 
       content:""; 
       display:block; 
       width:0; 
       height:0; 
       border:solid 5px; 
       border-color:transparent transparent transparent rgba(0,0,0,0.7); 
       position:absolute; 
       right:-10px; 
       top:9px 
      } 

      &:hover span { 
       display: block; 
      } 
     } 

     li:first-child a>span{top:-5px} 
    } 
} 

@media only screen and (min-width: 1025px) { 
    .side-nav-right { 
     top: 30%; 
     right: 2rem; 

     ul { 
      li { 
       margin-bottom: 1.5rem; 

       a { 
        width: 1.25rem; 
        height: 1.25rem; 
       } 
      } 
     } 
    } 
} 

vertical-align似乎什么也不做，注释掉所有边距和填充不WO RK。对于为什么这些元素不是排在第一位的原因，我感到茫然。

Answer 1

这里是不会影响你原来的代码结构的解决方案： 与followg代码替换您的HTML：

<nav class="side-nav-right"> 
    <ul> 
     <li class="bullet"> 
      <a data-scroll href="#center-splash"><span>Intro</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section1"><span>section1</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section2"><span>section2</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section3"><span>section3</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section4"><span>section4</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section5"><span>section5</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section6"><span>section6</span></a> 
     </li> 
     <li class="bullet"> 
      <a data-scroll href="#section7"><span>section7</span></a> 
     </li> 
    </ul> 
</nav> 

然后用下面的代码替换你的CSS：

.side-nav-right { 
    display: block; 
    position: fixed; 
    top: 20%; 
    right: 1rem; 

    ul { 
     list-style: none outside; 

     li { 
      margin-bottom: 1rem; 
      position:relative; 

      a { 
       color: transparent; 
       display: block; 
       width: 1rem; 
       height: 1rem; 
       border-radius: 50%; 
       background: $light-text; 
       box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red; 
       vertical-align: top; 

       &.active { 
        background: #808080; 
        box-shadow: none; 
       } 
      } 

      span { 
       color: $light-text; 
       position: absolute; 
       background: rgba(0,0,0,0.7); 
       display: none; 
       padding: 0.25rem 0.5rem; 
       border-radius: 3px; 
       vertical-align: middle; 
       width: 66px; 
       left: -90px; 
       top:-4px; 
      } 

      span:before { 
       content:""; 
       display:block; 
       width:0; 
       height:0; 
       border:solid 5px; 
       border-color:transparent transparent transparent rgba(0,0,0,0.7); 
       position:absolute; 
       right:-10px; 
       top:9px 
      } 

      &:hover span { 
       display: block; 
      } 
     } 

     li:first-child a>span{top:-5px} 
    } 
} 

@media only screen and (min-width: 1025px) { 
    .side-nav-right { 
     top: 30%; 
     right: 2rem; 

     ul { 
      li { 
       margin-bottom: 1.5rem; 

       a { 
        width: 1.25rem; 
        height: 1.25rem; 
       } 
      } 
     } 
    } 
} 

Answer 2

你正在看另一个方向。请注意，只有你的第一个元素都有特定的top属性设置为它：

li:first-child a>span{top:-5px} 

别人不。

对齐其他人，并调整第一个。

在这Fiddle我给了所有跨度的边缘顶部，并取消了第一个孩子的特殊待遇。可能只是在这个小提琴上工作，如果这样纠正小提琴的话，你的精确测量可能需要一些调整。

span { 
     color: black; 
     position: absolute; 
     background: rgba(0,0,0,0.7); 
     display: none; 
     padding: 0.25rem 0.5rem; 
     border-radius: 3px; 
     vertical-align: middle; 
     margin-top: -8px; 
}