如何将5个有边界的div恰好适合于包含边界的div

问题描述

|| 当我尝试将5个20％宽度，1px边框的内联块div放在一个包含div以及1px边框的内部时，它们将包裹到下一行。如果我摆脱所有边界，它们确实很合适。我了解这是因为div占据了包含div区域的100％，包括其填充和边框区域，这意味着它们不适合边界，因此必须进行包装。我的问题是如何修改此设置，以便使它们完全适合。当然这是一个普遍的问题吗？

<html>
    <head>
        <title> Test </title>
        <style type=text/css>

            div
            {
                margin: 0;
                padding: 0;
            }
            #navBar
            {
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
                margin-top: 10px;
                width: 50%;
            }
            .navBtn
            {
                border: 1px solid black;
                display: inline-block;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id=\"navBar\">
            <div class=\"navBtn\" style=\"width:20%\">Text</div><div class=\"navBtn\" style=\"width:20%\">Text</div><div class=\"navBtn\" style=\"width:20%\">Text</div><div class=\"navBtn\" style=\"width:20%\">Text</div><div class=\"navBtn\" style=\"width:20%\">Text</div>
        </div>
    </body>
</html>

附带说明一下，如果我将5个div放在自己的行上，它们之间会留有间隔，这真是太疯狂了，因此为什么它们都在一行上。在我的真实代码中，div是用PHP 生成的，因此它并不长。

解决方法

margin:0 -1px 0 -1px为您提供了一个轻松的起点。也建议为此使用float:left，因为bug3ѭ在某些浏览器中是错误的。要使容器<div>垂直扩展以适合内容，只需在浮标之后加上clear:both的元素即可。所有内容都可以在这里看到：http://jsfiddle.net/steve/qEJaA/ ,一种想法是消除.navBtn类的1px边框，并在每个navBtn div中创建一个嵌套元素：

<html>
    <head>
        <title> Test </title>
        <style type=text/css>

            div
            {
                margin: 0;
                padding: 0;
            }
            #navBar
            {
                border-top: 1px solid black;
                margin-left: auto;
                margin-right: auto;
                margin-top: 10px;
                width: 50%;
            }
            .navBtn
            {
                display: inline-block;
                text-align: center;
            }
.nav-text { border:1px solid #ccc; }
        </style>
    </head>
    <body>
        <div id=\"navBar\">
            <div class=\"navBtn\" style=\"width:20%\"><div class=\"nav-text\">Text</div></div><div class=\"navBtn\" style=\"width:20%\"><div class=\"nav-text\">Text</div></div><div class=\"navBtn\" style=\"width:20%\"><div class=\"nav-text\">Text</div></div><div class=\"navBtn\" style=\"width:20%\"><div class=\"nav-text\">Text</div></div><div class=\"navBtn\" style=\"width:20%\"><div class=\"nav-text\">Text</div></div>
        </div>
    </body>
</html>

,是的，这是一个普遍的问题。有（至少）两种常见的解决方案。第一个是每个子元素都有一个包装器元素，然后将“ 7”移到该子元素。边框停留在子元素上。因为您的id是navBar，显然这是某种菜单的内容，所以我将重组您的代码以添加所描述的包装器元素，并使之更具语义。请参阅：http：//jsfiddle.net/wFeYn/

<ul id=\"navBar\">
    <li style=\"width:20%\"><a href=\"#\">Text</a></li><li style=\"width:20%\"><a href=\"#\">Text</a></li><li style=\"width:20%\"><a href=\"#\">Text</a></li><li style=\"width:20%\"><a href=\"#\">Text</a></li><li style=\"width:20%\"><a href=\"#\">Text</a></li>
</ul>

#navBar {
    border: 1px solid black;
    margin: 10px auto 0 auto;
    width: 50%;
    margin: 0;
    padding: 0
}
#navBar li {
    display: inline-block;
    text-align: center;
}
#navBar li a {
    display: block;
    border: 1px solid black;
}

第二种解决方案是使用CSS3的ѭ11。这非常容易，并且所有现代浏览器都支持它（不幸的是IE7不支持）。要将其与原始代码一起使用，您可以执行以下操作：

.navBtn
{
    border: 1px solid black;
    display: inline-block;
    text-align: center;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

如果您确实关心IE7，那么您应该知道display: inline-block没有一些简单的技巧就无法工作。要获得IE7支持，请将ѭ14替换为：

display: inline-block;
*display: inline;
zoom: 1;

这适用于您的原始代码或我的更新代码。但是只有在您关心IE7的情况下。

5个 div 包含边界边界