Question

当我尝试将5个带有1px边框的20％宽度的内嵌块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生成的，所以它不长。

Answer 1

margin:0 -1px 0 -1px为您提供了一个轻松的起点。

还建议您使用float:left，因为display:inline-block在某些浏览器中存在错误。

要让容器<div>垂直展开以适合内容，只需在浮动容器后面加上clear:both元素。

所有这些都可以在这里看到：http://jsfiddle.net/steve/qEJaA/

Answer 2

一个想法是摆脱.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>

Answer 3

是的，这是一个常见的问题。

（至少）有两种常见的解决方案。

第一个是每个子元素都有一个包装元素，并将width移动到该元素。边框停留在子元素上。

因为id是navBar，这显然适用于某种菜单，因此我将重新构建代码以添加所描述的包装元素，并使其更具语义性。 / p>

请参阅： 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的box-sizing: border-box。

这非常简单，所有现代浏览器都支持它（不幸的是IE7 does not）。

要与原始代码一起使用，您可以这样做：

.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支持，请将display: inline-block;替换为：

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

这适用于您的原始代码或我更新的代码。但只有你关心IE7。

如何在包含边界的div内精确匹配5个有边框的div

3 个答案: