html - 如何摆脱 css 水平列表项之间的空白?

标签 html css html-lists navigationbar

<分区>

我有以下测试页面和 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>

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;
}

最佳答案

您需要在 li 上使用 display:blockfloat:left 来删除空格。当它们内联时,浏览器将它们视为单词,因此在它们之间留有空间。

另见 my similar question .

关于html - 如何摆脱 css 水平列表项之间的空白?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3043707/

相关文章:

HTML 和 CSS 表格溢出不起作用

css - VS 2015 - WebBrowser 控件不会显示 CSS 中的交替表行颜色

html - 将 UL 置于父级的中心并忽略其他 float UL

html - 如何添加视频并在上面写字?

Html 电子邮件模板无法正常工作

javascript - 在 Phonegap 应用程序中动态加载 index.html

jQuery DataTable 溢出和文本换行问题

jquery - 问题 : jQuery snaps div left while animating

javascript - 本地存储 : If the ID of a <li> exists in localstorage alert

html-lists - 在Markdown中从0开始排序列表