CSS文本对齐问题

在Chrome和Safari，发生以下问题的CSS：CSS文本对齐问题

ul，li和a或链接有推动一切垂直走了默认的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

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

来源

2013-04-08 Maurice Tempelsman

请在您的代码中加入一个[jsFiddle]（http://jsfiddle.net） – Adrift 2013-04-08 18:06:37

此外，您对所列属性尝试了哪些值？我发现只需在“body *”上设置margin：0和padding：0即可处理任何间距问题（垂直或水平）。 – Jeff 2013-04-08 18:35:58

http://jsfiddle.net/SBnKw/ – 2013-04-08 19:52:19

我看了你的Fiddle，我有点困惑。你说事情正在被垂直推开，但我根本没有看到这一切发生。

我所看到的唯一能够满足该描述的事情就是您的链接位于不同的行中。

如果这是问题，解决方案很简单：div s是块级元素。这意味着它们的默认宽度为100％，并且设计为在开始之前打破新的生产线，并在之后生产新的生产线。这是display: block;的行为，并且内置于div的默认样式。

为了解决这个问题，应用以下样式：

#headernav div{ display: inline; }

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

在this update to your fiddle我修复了您遇到的HTML问题。请注意，'tempLink'现在是一个类，目标是'。'在CSS中，不是表示ID的'＃'。

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

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

来源

2013-04-08 21:12:38 Jeff

我也很困惑，有时候最好只是继续前进。感谢您的输入。 – 2013-04-19 16:17:58

正如Adrift提到，如果您使用jsFiddle，诊断将会容易得多。这就是说，你有没有尝试过显示：inline-block或float：left？

来源

2013-04-08 18:28:06

http://jsfiddle.net/SBnKw/ – 2013-04-08 19:54:10

我已经发布了期待已久的小提琴，需要一些帮助，因为这些属性都没有奏效。 – 2013-04-08 20:19:39

CSS文本对齐问题

回答

相关问题