2

我正在尝试创建一个带有粗边框的水平菜单，该菜单显示在悬停的项目上。但是，由于某种原因，在 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>
4

6 回答 6

2

我将内部 div 向左浮动，它固定了奇怪的间距，而外部 div 向左浮动，迫使内部 div 位于其中。您可以更多地调整样式以满足您的需求。

div.outer{border-top: 1px dotted lime;margin: 10px;float:left;}
div.outer div
{
    float:left;
    margin: 0;
    padding: 0 12px;
    border-left: 1px solid silver;
    border-top: 3px solid red;
}

您还可以删除 div 之间的新行以仅修复空格。

于 2009-05-24T15:51:57.627 回答
1

display:inline很少能很好地工作。考虑float:left改用。

于 2009-05-24T15:30:12.737 回答
0

尝试添加：

body {
    margin: 0;
    padding: 0;
}

浏览器对这些 CSS 属性有不同的默认值。

于 2009-05-24T15:30:53.297 回答
0

display: inline-block选择器的声明div.outer div可能是您想要的。

于 2009-05-24T15:36:21.373 回答
0

间隙是由<div>. 要解决此问题，请将所有<div>内容放在同一行上，它们之间没有空格。但是我建议重新考虑css，可能使用列表<ul>

于 2009-05-24T15:49:46.457 回答
0

您获得空间的原因是由于内联元素将空间解释为要渲染的东西。这让您可以：

你好世界

并且仍然有2个单独的单词。要删除空间，您必须......好吧，删除空间。如前所述，当您尝试将元素齐平地放在一起进行布局时，使用 float: left 是首选选项。

于 2009-05-24T15:59:59.700 回答