Html 管理内联列表项之间空白的最佳方法_Html_Css_Html Lists_Navigation Style

Html 管理内联列表项之间空白的最佳方法

html css

Html 管理内联列表项之间空白的最佳方法,html,css,html-lists,navigation-style,Html,Css,Html Lists,Navigation Style,我的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> 然而，李之间的空白显示。我可

我的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>

然而，李之间的空白显示。我可以通过如下方式折叠空格来删除空格：

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

但是这主要是手工维护的，我想知道是否有更干净的方法来维护它。

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

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

显然，我忽略了悬停和活动集，但这创建了一个很好的块级导航，这是一种非常常见的方法，可以在保持标准的同时进行导航记得根据你的喜好调整，给背景加上颜色等等*/

如果您希望只保留文本和内联，我相信您不希望添加块元素：

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

意识到您想要删除空白，只需相应地调整边距/填充。

您真正想要的是CSS3。但我不确定是否有浏览器支持这个属性

两种替代方案是让标记的尾端占用空白。例如：

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

我看到的另一件事是使用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>

如果您可以使用浮动，请参阅thismat的解决方案，并且根据需要，您可能需要添加一个设置为

清除：两者的尾部

但是CSS3属性可能是最好的理论方法。
消除空白的另一个有用方法是将列表的字体大小
属性设置为0
，并将列表元素的一个设置回所需大小。
采用非基于XML的HTML并省略

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

更好的列表项解决方案是使用：
#nav li{float:left; width:auto;}

具有完全相同的视觉效果而不头痛。

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>

ul-li，ul-li:之前，ul-li:之后{显示：内联；内容：“”；}
一个
两个
三个

一个
两个
三

问题在于UL中的字体大小。将其设置为0，它将消失，但您不希望实际文本设置得太小，所以请将您的LI字体大小设置为您想要的大小
<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>




我也有同样的问题，上面的解决方案都无法解决。但我发现这对我很有用：
与此相反：
<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>







按如下方式构建html代码（链接文本前后的空格）：





没有足够的代表自己编辑它，但是CSS中出现的“#导航ul li”应该被替换为“#导航li”。float:left拯救了这一天！那么，这个幻影空白的原因是什么？？有人知道吗？换行符被渲染为一个空格。这真的很粗糙，没有必要。感谢这一点，我需要避免左浮动，这使我能够这样做。如果你需要将内联块列表居中（即，浮动不是一个真正的选项），这是惊人的。感谢这种方法在Android浏览器上似乎有一个问题——研究：为什么投票会被否决？它工作得很好，在我看来，这是最简单的破解方法。经过几个小时的搜索，这个方法非常简单。谢谢@micha
<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

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

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