相关疑难解决方法(0)

如何摆脱CSS水平列表项之间的空白?

我有以下测试页面和CSS.显示时,每个列表项之间有4px的间隙.如何让物品彼此相邻?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

css:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}
Run Code Online (Sandbox Code Playgroud)

html css html-lists navigationbar

25
推荐指数
4
解决办法
3万
查看次数

标签 统计

css ×1

html ×1

html-lists ×1

navigationbar ×1