html/css 中奇怪的边框间距
我正在尝试创建一个带有粗边框栏的水平菜单，该边框显示在悬停的项目上方。 然而，由于某种原因，Firefox 和 Chrome 中的栏右端有一个小间隙。 奇怪的是，IE 显示它没有间隙。 Firebug 没有显示造成这种差距的任何原因。
我尝试使用简单的 div，但它仍然出现。 我将其精简为一个 HTML 示例，仅包含 div。
谁能解释一下并告诉我如何消除这个差距？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Weird border spacing</title>
<style type="text/css">
div.outer
{
border-top: dotted 1px lime;
margin: 10px;
}
div.outer div
{
display: inline;
margin: 0;
padding: 0 12px;
border-left: solid 1px silver;
border-top: solid 3px red;
}
</style>
</head>
<body>
<div class="outer">
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
</body>
</html>
I'm trying to create a horizontal menu with a thick border bar that shows over the hovered item. However, for some reason there's a small gap at the right end of the bar in Firefox and Chrome. Strangely, IE displays it without the gap. Firebug doesn't show any reason for this gap.
I tried using simple divs and still it appears. I've distilled it down to a single HTML sample, with divs only.
Can anyone explain this and tell me how to get rid of that gap?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Weird border spacing</title>
<style type="text/css">
div.outer
{
border-top: dotted 1px lime;
margin: 10px;
}
div.outer div
{
display: inline;
margin: 0;
padding: 0 12px;
border-left: solid 1px silver;
border-top: solid 3px red;
}
</style>
</head>
<body>
<div class="outer">
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我将内部 div 向左浮动，固定了奇怪的间距，将外部 div 向左浮动，迫使内部 div 位于其内部。 您可以进一步调整样式以满足您的需求。
您还可以删除 div 之间的新行来修复空格。
I floated the inner div left which fixed the weird spacing and the outer div left which forced the inner div to be inside of it. You can adjust the styles more to fit your needs.
You could also remove the new lines between the divs to fix just the spaces.
display:inline很少能正常工作。 考虑使用float:left代替。display:inlinerarely works well. Consider usingfloat:leftinstead.尝试添加：
浏览器对这些 CSS 属性有不同的默认值。
Try to add:
Browsers have different default values for these CSS properties.
该间隙是由
之间的空格/换行引起的。 要解决此问题，请将所有放在同一行上，并且它们之间没有空格。 不过，我建议重新考虑 css，可能使用列表the gap is caused by the breaking space/new line between the
<div>. To fix this put all the<div>on the same line with no space between them. However I would recommend re-thinking the css, possibly using list<ul>您获得空间的原因是内联元素将空间解释为要渲染的内容。 这可以让你做：
Hello World
并且仍然有 2 个单独的单词。 要删除空格，您必须...好吧，删除空格。 当您尝试将元素齐平放置在一起进行布局时，如前所述，使用 float: left 是首选选项。
The reason you're getting the space is due to inline elements interpreting spaces as something to be rendered. This lets you do:
Hello World
and still have 2 separate words. To remove the space you have to...well, remove the space. When you're trying to put elements flush together for layout, as already mentioned, using float: left is the preferred option.
选择器
div.outer div的声明display: inline-block可能就是您想要的。the declaration
display: inline-blockfor the selectordiv.outer divmay be what you want.