管理内联列表项之间的空格的最佳方式 [英] Best way to manage whitespace between inline list items

问题描述

我的HTML如下：

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

而我的css：

#nav {
    display: inline;
}

但是li之间的空格显示。我可以通过折叠空格来删除空格：

However the whitespace between the li's shows up. I can remove the whitespace by collapsing them like so:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

但是这主要是由手工维护，我想知道是否有一个更干净的方式。

But this is being maintained largely by hand and I was wondering if there was a cleaner way of doing it.

推荐答案

这里有几个选项，首先我将在创建内联列表时给出我的常规做法：

Several options here, first I'll give you my normal practice when creating inline lists:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

然后CSS使它的功能如下：

Then the CSS to make it function as you intend:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

显然，我忽略了悬停和活动集，水平导航，是一个非常常见的方法，同时仍然遵守标准。 / *记住根据自己的喜好调整，为背景添加颜色等等/ /

Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */

如果你想保持文本只是内联，元素我相信你会想添加：

If you would like to keep it just with text and just inline, no block elements I believe you'd want to add:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

要移除空格，只需相应调整边距/填充。

Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.

这篇关于管理内联列表项之间的空格的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！