gpt4 book ai didi

css - Chrome 和 Safari 中的链接错位

转载 作者:行者123 更新时间:2023-11-28 12:13:53 26 4
gpt4 key购买 nike

我正在尝试创建一个水平导航,在左右两侧都有链接。

左侧的元素似乎没有 3 像素的垂直填充,因此与 DIV 的顶部垂直对齐,而右侧的元素垂直对齐正确。

这发生在 Chrome 和 Safari 中,但不会发生在 Firefox 中。

谁能告诉我我做错了什么,或者我需要做什么才能在不改变 Firefox 行为的情况下使 Chrome 正常工作。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test Navigation</title>
<style>
* { border: red solid 1px; }
div { border: green solid 1px; }
body { width: 90%; margin-left: 5%; }
body { background-color: #EEEEEE; color: #FFFFFF; }

#navFull { background-color: #DDDDDD; color: #222222;
margin: 1px;
padding: 3px;
overflow: auto;
}
#navFull a { background-color: #222222; color: #DDDDDD;
padding: 3px 7px;
text-decoration: none;
border: white solid 1px;
}
#navFull a:link {}
#navFull a:visited {}
#navFull a:hover {background-color: #DDDDDD; color:#222222; }
#navFull a:active {}
</style>
</head>
<body>
<div id=pgFull>
<div id=navFull>
<span id=navLeft>
<a href=#>&nbsp;&nbsp;&nbsp;Albums&nbsp;&nbsp;&nbsp;</a>
<a href=#>&nbsp;&nbsp;&nbsp;Tags&nbsp;&nbsp;&nbsp;</a>
</span>


<span id=navRight style="float:right;"><a href=#>&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;</a>
<a href=#>&nbsp;&nbsp;&nbsp;Help&nbsp;&nbsp;&nbsp;</a>
<input type="button" value="&nbsp;&nbsp;&nbsp;styled text button&nbsp;&nbsp;&nbsp;"
style="background-color:#c00; color:#fff;" />
</span>
</div>
</div>

</body>
</html>

最佳答案

左导航和右导航都有 3 像素的内边距。

不同之处在于您将输入元素输入到具有默认边距的右侧 Nav 中。 只需为您的输入添加一个 CSS:

#navFull input{
margin:0px;
}

现在,如果您将 padding:3px 调整为更高的值,Left 和 Right 将始终以相同的方式受到影响。

Fiddle

关于css - Chrome 和 Safari 中的链接错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19314343/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com