Home/ Questions/Q 6384777
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:49:02+00:00

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

  • 0

I tried to make tabs using CSS3 and got the following result:
enter image description here

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
    ...
}
    • 0