删除纯css导航菜单栏第一个按钮上的空白答案

【问题标题】：Removing empty space on first button of pure css navigation menu bar删除纯css导航菜单栏第一个按钮上的空白
【发布时间】：2011-12-26 10:42:35
【问题描述】：

我正在尝试构建一个非常简单的纯 CSS 导航栏，但遇到了障碍。我使用的是 html 列表，第一项似乎有多余的空间，我无法摆脱。

Live Example

Also on JSFIDDLE [更新：奇怪的是 JSFIDDLE 没有显示这个问题，呈现了我想要的导航栏，必须是他们的后端来解决任何问题。]

CSS：

body {
    font-family: sans-serif;
    font-size: 62.5%;
    color: #666;
    background-color: #e6e6e6;
    padding: 0;
    margin: 0;
    border: 0;
}
header {
    min-width: 400px;
    max-width: 700px;
    padding: 40px 8px 0;
    z-index: 2;
    position: relative;
}
header nav ul {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    list-style-type: none;
}
header nav li {
    float: left;
    font-size: 16px;
    line-height: 1;
    border-right: 1px solid #ddd;
    position: relative;
}
header nav li:first-child {
    border-left: 1px solid #ddd;
}
header nav li:last-child {
    border: none;
}
header nav li a {
    display: block;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 #fff;
    padding: 7px 15px;
}
header nav li a:hover {
    color: #000;
    background: #f6f6f6;
}

HTML：

<header>
<nav>
<ul>
    <li><a href="index.html">Welcome</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="join.html">Join A Team</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="faq.php">Facebook</a></li>
</ul>
</nav>
</header>

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

在其他浏览器上也检查一下，在Opera上，项目根本没有出现

标签： html css navigation uinavigationbar

【解决方案1】：

从<ul> 中删除填充。

header nav ul {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    list-style-type: none;
    padding: 0;
}

【讨论】：

似乎可以修复它！不敢相信我错过了。还有一种简单的方法可以在触发 a:hover 时保留边界半径吗？
我建议将边框半径分配给<a>，而不是<ul>。您可以将header nav ul li a:first-child 用于菜单上最左侧的项，并将last 类分配给最右侧的列表项，然后执行header nav ul li.last a。

【解决方案2】：

写

ul{
 margin:0;
 padding:0;
}

或者使用reset sheet最好使用http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

【讨论】：

谢谢，是的，只是填充引起了问题，还有一种简单的方法可以在触发 a:hover 时保留边框半径吗？