无法正确定位与<a>&#39;s?</a>内联的水平列表

Question

所以基本上我正在做一个具有大图像功能的布局，可以使用下面的箭头从一张图片移动到另一张图片。老实说，就图片功能而言，它与flipboard.com的首页非常相似。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

输出：

有谁知道为什么点和右箭头偏离左箭头？我试过调整填充，边距，＆＃34;左边：＆＃34;属性，并且所有这些都可以接受使左箭头没有正确选择，只有当你将鼠标悬停在非常小的某个区域时，它才会识别出它是否会悬停在它上面。现在，使用显示的代码，它不会这样做，但定位是关闭的。有没有人有任何想法？

Answer 1

因为无序列表具有默认填充，您可以通过将padding:0添加到.feature-nav ul规则来解决此问题：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试display: inline-block获取箭头和列表项，然后为它们填充更大的＆＃34;命中＆＃34;悬停时的区域。您还可以为箭头或列表项设置右侧或左侧margin，以便将它们分开。

至于他们偏离中心的原因，请从ul元素中删除填充。

至于

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;