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