Why there's a space between these tabs?_问答_开发者

开发者 https://www.devze.com 2023-04-01 01:42 出处：网络

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

相关专题：css

I tried to make tabs using CSS3 and got the following result:

Why there's a space between these tabs?

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&g开发者_开发技巧t;
</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.

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 using display: inline-block:

nav ul.topnav li {
    float: left;
    ...
}

It's the carriage return in the HTML markup.

Look here: http://jsfiddle.net/8D26e/6/.

Try floating the lis. Or you can get rid of the spaces in your markup (between <li> and <li>). This happens when you use display:inline-block.

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.

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