無法正確定位內聯<a>的水平列表？

所以基本上我做了一個具有大圖像特徵的佈局，可以使用下面的箭頭從一幅圖像移動到另一幅圖像。老實說，它和flipboard.com的頭版非常相似，就圖片功能而言。無法正確定位內聯<a>的水平列表？

.feature-nav { 
 
     width: 234px; 
 
     margin: auto; 
 
    } 
 
    
 
    .prev-arrow { 
 
     display: inline; 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .prev-arrow:hover { 
 
     color: #428bca; 
 
    } 
 
    
 
    .feature-nav ul { 
 
     display: inline; 
 
    } 
 
    
 
    .feature-nav li { 
 
     display: inline; 
 
    } 
 
    
 
    .nav-dot a { 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .next-arrow { 
 
     display: inline; 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .next-arrow:hover { 
 
     color: #428bca; 
 
    }

<div class="feature-nav"> 
 
      <a href="#" class="prev-arrow">&lt;</a> 
 
      <ul> 
 
       <li class="nav-dot"><a href="#">&#8226;</a></li> 
 
       <li class="nav-dot"><a href="#">&#8226;</a></li> 
 
       <li class="nav-dot"><a href="#">&#8226;</a></li> 
 
      </ul> 
 
      <a href="#" class="next-arrow">&gt;</a> 
 
     </div>

輸出：

enter image description here

有誰知道爲什麼點和右箭頭是如此遠離左箭頭轉向？我嘗試過調整填充，邊距，「left：」屬性，並且所有這些屬性都可以接受使左箭頭不能正確選擇的情況，它只會識別您懸停在一個非常小的區域上方。現在，用顯示的代碼，它不這樣做，但定位是關閉的。有沒有人有任何想法？

來源

2014-09-23 Chris

由於無序列表有一個默認的填充，你可以通過添加padding:0您.feature-nav ul規則擺脫：

.feature-nav { 
 
     width: 234px; 
 
     margin: auto; 
 
    } 
 
    
 
    .prev-arrow { 
 
     display: inline; 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .prev-arrow:hover { 
 
     color: #428bca; 
 
    } 
 
    
 
    .feature-nav ul { 
 
     display: inline; 
 
     padding:0; 
 
    } 
 
    
 
    .feature-nav li { 
 
     display: inline; 
 
    } 
 
    
 
    .nav-dot a { 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .next-arrow { 
 
     display: inline; 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .next-arrow:hover { 
 
     color: #428bca; 
 
    }

<div class="feature-nav"> 
 
      <a href="#" class="prev-arrow">&lt;</a> 
 
      <ul> 
 
       <li class="nav-dot"><a href="#">•</a></li> 
 
       <li class="nav-dot"><a href="#">•</a></li> 
 
       <li class="nav-dot"><a href="#">•</a></li> 
 
      </ul> 
 
      <a href="#" class="next-arrow">&gt;</a> 
 
     </div>

來源

2014-09-23 18:50:09 j08691

謝謝！如此簡單，如此優雅，如此完美答案。 – Chris 2014-09-23 19:01:13

嘗試display: inline-block的箭頭和列表項，並給他們當懸停時填充更大的「命中」區域。您還可以設置箭頭或列表項的右側或左側margin以將它們分開一點。

至於他們爲什麼偏離中心，請從ul元素中移除填充。

對於

.feature-nav { 
 
     width: 234px; 
 
     margin: auto; 
 
    } 
 
    
 
    .prev-arrow { 
 
     display: inline-block; 
 
     padding 10px; 
 
     margin-right: 20px; 
 
     font-size: 30px; 
 

 
     color: #B6B6B6; 
 
    } 
 
    
 
    .prev-arrow:hover { 
 
     color: #428bca; 
 
    } 
 
    
 
    .feature-nav ul { 
 
     display: inline; 
 
     padding: 0; 
 
    } 
 
    
 
    .feature-nav li { 
 
     display: inline-block; 
 
     margin: 0 5px; 
 
    } 
 
    
 
    .nav-dot a { 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .next-arrow { 
 
     display: inline-block; 
 
     padding 10px; 
 
     margin-left: 20px; 
 
     font-size: 30px; 
 
     color: #B6B6B6; 
 
    } 
 
    
 
    .next-arrow:hover { 
 
     color: #428bca; 
 
    }

<div class="feature-nav"> 
 
      <a href="#" class="prev-arrow">&lt;</a> 
 
      <ul> 
 
       <li class="nav-dot"><a href="#">•</a></li> 
 
       <li class="nav-dot"><a href="#">•</a></li> 
 
       <li class="nav-dot"><a href="#">•</a></li> 
 
      </ul> 
 
      <a href="#" class="next-arrow">&gt;</a> 
 
     </div>

來源

2014-09-23 18:57:09 mc01

無法正確定位內聯<a>的水平列表？

回答

相關問題