0

您无法想象仅创建简单的代码并且它们不起作用是多么令人沮丧:(我希望此代码使导航水平。并为每个 a 设置宽度以将它们分开

HTML：

   <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Support</a></li>
  </ul>

CSS：

body{margin:0;}   ul{list-style-type:none;margin:0;padding:0;display:block;}
li{float:left;}   a{width:60;}
4

3 回答 3

3

我想你可能希望你的链接都是 60px 宽。如果是这种情况，请更改：

a{width:60;}

至：

a { width: 60px; display: inline-block;}

'60' 本身并不是 CSS 宽度的公认度量，您需要 inline-block 来阻止它被视为一行文本。

但是，如果您想对此进行改进，并使每个链接分开相同的数量（实际上，某些链接比其他链接更靠近），我会在 li 上留出一个边距，如下所示：

li { margin-right: 40px; }
于 2013-07-24T01:45:04.810 回答
3

不知道你真的想在这里做什么......我想我同意 SharkofMirkwood。利用： 

a { width: 60px; display: inline-block; margin: 0 10px;}

添加一些边距将有助于将它们分开。此外，使用:last-of-type来防止最后一个列表项锚点破坏导航。查看Mozilla 开发者网络。它可能会帮助您了解这一切是如何工作的。

于 2013-07-24T02:25:35.520 回答
0

我认为您可能希望它内联显示（全部在一行中）。如果是这种情况，您需要将 display 属性添加到您的 li 中，您可以为此使用 inline 或 inline-block。

示例：li{float:left;display:inline;}

于 2013-07-24T01:46:28.333 回答