导航栏中的项目点击后略有偏移

Question

我有一个包含4个项目的导航元素。 当我点击任何元素时，我注意到这些项目稍微分开，div展开。

<div id="siteNavigation" class="navDiv"> 
    <nav> 
    <ul> 
     <li><span><a href="index.html" class="selected">Home</a></span></li> 
     <li><a href="resources\waiting_room.jpg">Meet Me</a></li> 
     <li><a href="resources\waiting_room.jpg">About</a></li> 
     <li><a href="resources\waiting_room.jpg">Contact</a></li> 
    </ul> 
    </nav> 
</div> 


.navDiv { 
    display: inline; 
    width: auto; 
    float: right; 
    border: solid; 
} 

nav ul { 
    clear: both; 
    list-style-position: inside; 
    clear: left; 
    list-style: none; 
    margin-left: 0; 
    width: auto; 
    padding-top: 32px; 
    text-align: center; 
    white-space: nowrap; 
} 

nav ul li { 
    display: inline-block; 
    white-space: nowrap; 
    padding-left: 8px; 
    border: none; 
} 

nav ul li a { 
    color: #000000; 
    /* #E3CF9C */ 
    font-size: 1em; 
    font-weight: bold; 
    text-decoration: none; 
    letter-spacing: 0.05em; 
    padding: 10px 3.125% 26px 3.125%; 
    text-transform: uppercase; 
    border: none; 
} 

nav ul li a:hover { 
    color: #BF0000; 
} 

nav ul li a.selected { 
    color: #BF0000; 
} 

nav ul li a.selected:hover { 
    color: #E3CF9C; 
} 

的jsfiddle例如：https://jsfiddle.net/rfhasw48/1/

什么我需要改变，以使导航留一定的大小？

Answer 1

只需从nav ul li a中删除填充即可。

更新CSS：

.navDiv { 
    display: inline; 
    width: auto; 
    float: right; 
    border: solid; 
} 

nav ul { 
    clear: both; 
    list-style-position: inside; 
    clear: left; 
    list-style: none; 
    margin-left: 0; 
    width: auto; 
    padding-top: 32px; 
    text-align: center; 
    white-space: nowrap; 
} 

nav ul li { 
    display: inline-block; 
    white-space: nowrap; 
    padding-left: 8px; 
    border: none; 
} 

nav ul li a { 
    color: #000000; 
    /* #E3CF9C */ 
    font-size: 1em; 
    font-weight: bold; 
    text-decoration: none; 
    letter-spacing: 0.05em; 
    text-transform: uppercase; 
    border: none; 
} 

nav ul li a:hover { 
    color: #BF0000; 
} 

nav ul li a.selected { 
    color: #BF0000; 
} 

nav ul li a.selected:hover { 
    color: #E3CF9C; 
}