列表中第一個元素和第二個元素之間的較大差距

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; 
}