Question

我尝试使用CSS3制作标签并获得以下结果： enter image description here

使用以下代码：

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

如何删除标签之间的空格（如图所示）？ PS。它似乎是一个尾随空间，因为在列表的末尾我也有这个空间。

Answer 1

空格实际上是<li>标记之间的换行符（空白）。由于您创建了<li>个内联块，因此将空格视为与内联块在同一行上的文本，从而使它们间隔开。

您可以从HTML中删除换行符，也可以使用<li>浮动display: inline-block而不是nav ul.topnav li { float: left; ... }：

{{1}}

Answer 2

这是HTML标记中的回车。

请看这里：http://jsfiddle.net/8D26e/6/。

Answer 3

尝试浮动li。或者您可以删除标记中的空格（<li>和<li>之间）。使用display:inline-block时会发生这种情况。

Answer 4

在设计任何内容之前尝试使用CSS reset。

仅供参考：CSS重置文件是一个文件，它取消浏览器为HTML元素提供的所有默认样式。由于浏览器的默认样式不同，设计人员通常认为这是一种很好的做法，可以通过应用某种CSS重置来首先将默认样式置零，然后应用自己的样式。

Answer 5

使用Google Chrome ispector

http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-inspector/

您可以更改动态css参数，并发现哪个参数在标签之间生成空格。

无论如何我想你只需要改变填充：10px;（ul.topnav li）填充：0px;（ul.topnav li）

此致

为什么这些标签之间有空格？

5 个答案: