Html 管理内联列表项之间的空白的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/241512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to manage whitespace between inline list items
提问by
My HTML is as follows:
我的 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>
And my css:
还有我的 css：
#nav {
display: inline;
}
However the whitespace between the li's shows up. I can remove the whitespace by collapsing them like so:
然而，li 之间的空白出现了。我可以通过像这样折叠它们来删除空格：
<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.
但这主要是手工维护的，我想知道是否有更清洁的方法。
采纳答案by thismat
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>
Then the CSS to make it function as you intend:
然后使用 CSS 使其按您的意图运行：
#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.
意识到您想删除空格，只需相应地调整边距/填充。
回答by Marius Schulz
Another useful way to eliminate the whitespace is to set the list's font-sizeproperty to 0and the list elements' one back to the required size.
另一种消除空格的有用方法是将列表的font-size属性设置0为所需的大小，并将列表元素的属性设置回所需的大小。
回答by J. Holmes
What you really want is the CSS3 white-space-collapse: discard. But I'm not sure if any browsers actually support that property.
你真正想要的是 CSS3 white-space-collapse: discard。但我不确定是否有任何浏览器真正支持该属性。
A couple alternative solutions is to let the tailing end of a tag consume the whitespace. For example:
几个替代解决方案是让标签的尾端消耗空白。例如：
<ul id="nav"
><li><a href="./">Home</a></li
><li><a href="/About">About</a></li
><li><a href="/Contact">Contact</a></li
></ul>
Another thing I've seen done is to use HTML comments to consume whitespace
我见过的另一件事是使用 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>
See thismat's solution if you are okay using floats, and depending on the requirements you might need to add a trailing <li>that is set to clear: both;.
如果您可以使用浮点数，请参阅 thismat 的解决方案，并且根据要求，您可能需要添加<li>设置为clear: both;.
But the CSS3 property is probably the besttheoretical way.
但是 CSS3 属性可能是最好的理论方法。
回答by Louisa
A better solution for list items is to use:
列表项的更好解决方案是使用：
#nav li{float:left; width:auto;}
Has exactly the same visual effect without the headache.
具有完全相同的视觉效果，没有头痛。
回答by guimihanui
Adopt non-XML-based HTML and omit </li>.
采用非基于 XML 的 HTML 并省略</li>.
<ul id="nav">
<li><a href="./">Home</a>
<li><a href="/About">About</a>
<li><a href="/Contact">Contact</a>
</ul>
Then set the display property of the items to inline-block instead of inline.
然后将项目的显示属性设置为 inline-block 而不是 inline。
#nav li {
display: inline-block;
/display: inline; /* for IE 6 and IE 7 */
/zoom: 1; /* for IE 6 and IE 7 */
}
回答by user764728
The problem is the font size in the UL. Set it to 0 and it will disappear, but you don't want you actual text to be set so small, so then set your LI font size to whatever you want it to be.
问题是 UL 中的字体大小。将其设置为 0 它将消失，但您不希望将实际文本设置得如此之小，因此将 LI 字体大小设置为您想要的任何值。
<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>
回答by micha
I had the same Problem and none of the above solutions could fix it. But I found out this works for me:
我遇到了同样的问题，上述解决方案均无法解决。但我发现这对我有用：
Instead of this:
取而代之的是：
<ul id="nav">
<li><a href="./">Home</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
build your html code like this (whitespace before and after the link text):
像这样构建你的 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>
回答by user2024227
<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>
