<li> 问题，链接相互重叠而不是并排

【问题标题】：<li> problems, links are going on top of each other not side by side<li> 问题，链接相互重叠而不是并排
【发布时间】：2012-01-28 12:29:09
【问题描述】：

希望您能看到问题所在，我希望链接并排而不是彼此重叠？

你能看看 JS Fiddle 有什么问题吗：http://jsfiddle.net/pky7X/

感谢您的帮助

【问题讨论】：

您将顶部和底部边距设置为 -35px 是否有原因？您实际上将它们的高度设置为 0（或更小），并且使布局变得一团糟。 See here，获取水平列表样式的基本示例。
这很方便！谢谢

标签： css navigation html-lists

【解决方案1】：

一开始你忘了<ul></ul>

<style>
ul {
   list-style-type: none;
}
li {
   float: left;
   border: 1px solid #ff9900;
}
</style>

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

【讨论】：

它仍然做同样的事情：/
可以，但无效。
我现在很困惑：s 我已经删除了
和

为什么要删除

和

之间的差距很大，你必须调整它们的边距。
我不知道，没有你的代码，现在是什么样子。

而不是margin: -35px 220px;，margin: 5px; 对于 li 元素看起来很好，没有</br>。不是吗？

【解决方案2】：

首先：您的<li> 标签周围缺少<ul>（不要认为这在HTML5 中有效；以前不是这样）。第二：为什么还要使用列表项，然后删除list-style 并添加float？

直接使用<span> 或<a>...

<a href="./">Home</a><a href="./about">About</a>

...然后使用 CSS 设置它们的填充、样式、分隔线等。

【讨论】：

对菜单使用<li> 是正确的。实际上，菜单是链接（菜单项）的列表。因此，将其呈现为列表在语义上是正确的。

【解决方案3】：

删除<br /> 并将<li> 标签放在<ul> 中，如下所示：

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

【讨论】：

【解决方案4】：

从 CSS 中删除 margin: -35px 220px; 并从 HTML 中删除 <br />。

【讨论】：