为什么这些选项卡之间有空格？
我尝试使用 CSS3 制作选项卡并得到以下结果： 
使用以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
nav{
width:1000px;
padding-top:30px;
margin:0 auto 0 auto;
}
nav ul.topnav{
margin:0;
padding:0;
width:100%;
position:relative;
}
nav ul.topnav li{
display:inline-block;
width:173px;
height:18px;
padding:10px;
font-size:15px;
margin:0;
box-shadow:inset 0 0 5px 5px #E7E4E9;
border:1px solid #8C8293;
border-radius:15px;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
color:#666666;
text-align:center;
}
</style>
<title></title>
</head>
<body>
<nav>
<ul class="topnav">
<li>Overview</li>
<li>Alarms</li>
<li class="selected">Config</li>
<li>Logs</li>
<li>Command Line</li>
</ul>
</nav>
</body>
</html>
如何删除选项卡之间的空间（如图所示）？ 附言。它似乎是一个尾随空格，因为在列表的末尾我也有这个空格。
I tried to make tabs using CSS3 and got the following result:
With the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
nav{
width:1000px;
padding-top:30px;
margin:0 auto 0 auto;
}
nav ul.topnav{
margin:0;
padding:0;
width:100%;
position:relative;
}
nav ul.topnav li{
display:inline-block;
width:173px;
height:18px;
padding:10px;
font-size:15px;
margin:0;
box-shadow:inset 0 0 5px 5px #E7E4E9;
border:1px solid #8C8293;
border-radius:15px;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
color:#666666;
text-align:center;
}
</style>
<title></title>
</head>
<body>
<nav>
<ul class="topnav">
<li>Overview</li>
<li>Alarms</li>
<li class="selected">Config</li>
<li>Logs</li>
<li>Command Line</li>
</ul>
</nav>
</body>
</html>
How can I remove that space between the tabs (as shown in the image)?
PS. It seems to be a trailing space because at the end of the list I have this space as well.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这些空格实际上是
标记之间的换行符（空格）。由于您创建了您可以从 HTML 中删除换行符，或者浮动
而不是使用display: inline-block：The spaces are actually the newlines (whitespace) between your
<li>tags. Since you made your<li>s inline blocks, the whitespace is treated as text on the same line as your inline blocks, causing them to be spaced apart.You can either remove the newlines from your HTML, or float your
<li>s instead of usingdisplay: inline-block:它是 HTML 标记中的回车符。
请看这里：http://jsfiddle.net/8D26e/6/。
It's the carriage return in the HTML markup.
Look here: http://jsfiddle.net/8D26e/6/.
尝试浮动
li。或者，您可以删除标记中的空格（和display:inline-block时会发生这种情况。Try floating the
lis. Or you can get rid of the spaces in your markup (between<li>and<li>). This happens when you usedisplay:inline-block.在设置任何样式之前，尝试使用 CSS 重置。
仅供参考：CSS 重置文件是一个使浏览器为 HTML 元素提供的所有默认样式无效的文件。由于浏览器的默认样式有所不同，设计人员通常认为这是一个很好的做法，首先通过应用某种 CSS 重置将默认样式清零，然后应用自己的样式。
Try to use a CSS reset before styling anything.
FYI: A CSS reset file is a file that nullifies all of the default styling given by browsers to HTML elements. Because browsers differ in that default style, designers usually consider this a good practice to first zero-out default styles by applying some sort of CSS reset, and then apply their own styles.
使用 google chrome isspector
http://www.thirdtipsaday.com/ 2008/12/debug-inspect-google-chrome-inspector/
您可以动态更改 css 参数并发现哪个参数在选项卡之间生成空格。
无论如何，我想你只需要将 padding:10px;(ul.topnav li) 更改为 padding:0px;(ul.topnav li)
问候
Using google chrome ispector
http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-inspector/
you can change on the fly css parameters and discover which one generate a space beetween tabs.
Anyway I guess that you just need to change padding:10px;(ul.topnav li) to padding:0px;(ul.topnav li)
Regards