如何将5个带边框的div精确地放置在一个包含有边框的div中

Question

如何将5个带边框的div精确地放置在一个包含有边框的div中

3

当我尝试将五个宽度为20%、带有1px边框的inline-block div放入一个包含div中时，它们会换行。如果我去掉所有边框，它们就能适应。我理解这是因为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生成的，所以并不长。

- Cam Jackson

不确定为什么这被标记为 PHP。 - dqhendricks

OP说：“在我的实际代码中，div是用PHP生成的”（尽管这是一个CSS问题）。 - Ben

是的，我猜PHP部分并不是与我的实际问题相关的。 - Cam Jackson

3个回答

2

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

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

第一种方法是为每个子元素添加一个包装器元素，并将 width 属性应用于该元素。边框保留在子元素中。

因为您的 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的box-sizing: border-box。

这非常容易，所有现代浏览器都支持它（不幸的是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需要一些简单的hack才能正常工作。

为了支持IE7，请将display:inline-block;替换为：

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

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

- thirtydot

很好，那也可以！你特别使用ul和li的原因是什么？ - Cam Jackson

有几个原因。首先，您拥有的是链接列表。因此，最好的选择元素是ul（无序列表）。其次，它巧妙地解决了添加额外包装元素的问题。（假设这些最终将成为链接）哪个看起来更好？ <div id="navBar"><div class="navBtn" style="width:20%"><div class="nav-text"><a href="#">Text</a></div></div> .. </div> 还是 <ul id="navBar"><li style="width:20%"><a href="#">Text</a></li> .. </ul> - thirtydot

2

margin:0 -1px 0 -1px可以作为一个简单的起点。

同时建议使用float:left，因为在某些浏览器中display:inline-block存在缺陷。

要使您的容器

垂直展开以适应内容，请在浮动元素后添加具有clear:both属性的元素。

所有内容都可以在这里查看：http://jsfiddle.net/steve/qEJaA/

- Ben

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shan Plourde · Accepted Answer

一个想法是去掉 .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>