Question

我正在尝试创建一个水平菜单，其边框条显示悬停项目。但是，出于某种原因，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>

Answer 1

我漂浮了内部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之间的新行以仅修复空格。

Answer 2

display:inline很少有效。请考虑改为使用float:left。

Answer 3

尝试添加：

body {
    margin: 0;
    padding: 0;
}

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

Answer 4

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

Answer 5

差距是由<div>之间的突破空间/新线引起的。要解决这个问题，请将所有<div>放在同一行，它们之间没有空格。但是，我建议重新考虑css，可能使用列表<ul>

Answer 6

获得空间的原因是内联元素将空格解释为要呈现的内容。这可以让你：

Hello World

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

html / css中的奇怪边框间距

6 个答案: