我尝试使用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>
如何删除标签之间的空格(如图所示)? PS。它似乎是一个尾随空间,因为在列表的末尾我也有这个空间。
答案 0 :(得分:5)
空格实际上是<li>
标记之间的换行符(空白)。由于您创建了<li>
个内联块,因此将空格视为与内联块在同一行上的文本,从而使它们间隔开。
您可以从HTML中删除换行符,也可以使用<li>
浮动display: inline-block
而不是nav ul.topnav li {
float: left;
...
}
:
{{1}}
答案 1 :(得分:2)
这是HTML标记中的回车。
答案 2 :(得分:2)
尝试浮动li
。或者您可以删除标记中的空格(<li>
和<li>
之间)。使用display:inline-block
时会发生这种情况。
答案 3 :(得分:0)
在设计任何内容之前尝试使用CSS reset。
仅供参考:CSS重置文件是一个文件,它取消浏览器为HTML元素提供的所有默认样式。由于浏览器的默认样式不同,设计人员通常认为这是一种很好的做法,可以通过应用某种CSS重置来首先将默认样式置零,然后应用自己的样式。
答案 4 :(得分:-1)
使用Google Chrome ispector
http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-inspector/
您可以更改动态css参数,并发现哪个参数在标签之间生成空格。
无论如何我想你只需要改变填充:10px;(ul.topnav li)填充:0px;(ul.topnav li)
此致