0

在 Chrome 和 Safari 中，会出现以下 CSS 问题：

ul, liand aor link 有一个默认的 CSS 属性，可以将所有内容垂直推开。我摆弄了以下属性：

font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom

似乎没有什么可以阻止这个问题。我已经下载了 Yahoo 的 CSS 重置，但我不确定如何正确使用它。我没有追求那个，因为我不知道它会解决我的问题。

4

2 回答 2

1

我看过你的小提琴，我有点困惑。你说事情被垂直推开，但我根本没有看到这种情况发生。

我看到的唯一可能符合该描述的内容是您的链接位于不同的行上。

如果这是问题，解决方法很简单：divs 是块级元素。这意味着它们默认为 100% 宽度，并且设计为在开始之前换行，之后换行。这是 div 的默认样式的行为，display: block;并且内置于其中。

要解决此问题，请应用以下样式：

#headernav div{ display: inline; }

然而，这是你的问题中最少的。您复制到小提琴中的代码缺少 div 元素之一的结束标记，这可能会导致旧浏览器中出现不可预测的行为。您有两个具有相同 ID 的 div，这是一个主要的禁忌。

在您的小提琴的此更新中，我已经修复了您遇到的 HTML 问题。请注意，“tempLink”现在是一个类，并以“.”为目标。在 CSS 中，不是表示 ID 的“#”。

我已将上述 CSS 应用于类 tempLink，而不是 headernav 中的任何 div。

请注意，您的两个链接现在是并排的。您可以使用边距和填充来控制它们之间的水平间距（针对 tempLink 类）。

于 2013-04-08T21:12:38.157 回答
0

正如 Adrift 提到的，如果您使用 jsFiddle，诊断起来会容易得多。话虽如此，您是否尝试过 display: inline-block 或 float: left？

于 2013-04-08T18:28:06.200 回答